/* College OS home (app/college_home.html), drawn from the owner's mockup: deep indigo night sky (never black), violet
   glass cards with glow, a lavender lower row, the skyline and the numbers at the bottom. */
:root { --cos-ink: #f4f1ff; --cos-soft: #c9c3ef; --cos-violet: #8b5cf6; --cos-pink: #d946ef; --cos-grad: linear-gradient(90deg, #8b5cf6, #d946ef);
  --cos-panel: #f4f1ff; --cos-panel-ink: #1d1747; --cos-line: rgba(160, 140, 255, .35); }

/* this page brings its own top bar and sidebar: hide the site's bars on laptops (phones keep the app's tab bar) */
@media (min-width: 900px) {
  body:has(.cos) header.site-header { display: none !important; }
  body:has(.cos) main[role="main"] { margin-top: 0 !important; padding-top: 0 !important; }
}
main[role="main"]:has(> .row > .cos) { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
main[role="main"] > .row:has(> .cos) { margin: 0 !important; }
.cos { flex: 0 0 100%; max-width: 100%; min-height: 100vh; padding: 10px 14px 0; color: var(--cos-ink); font-family: 'Nunito', system-ui, sans-serif;
  background: radial-gradient(900px 600px at 70% 10%, rgba(91, 63, 214, .55), transparent 60%), radial-gradient(700px 500px at 0% 40%, rgba(139, 92, 246, .35), transparent 60%),
              linear-gradient(160deg, #110d3a 0%, #1b1350 45%, #24165e 100%); }
.cos a { text-decoration: none !important; color: inherit; }
.cos h1, .cos h2, .cos h3 { color: inherit; margin: 0; }

/* top bar */
.cos-top { display: flex; align-items: center; gap: 16px; padding: 4px 6px 10px; }
.cos-brand { display: flex; align-items: center; gap: 10px; min-width: 176px; }
.cos-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #a855f7, #6d28d9);
  font: 900 26px 'Nunito', sans-serif; color: #fff; box-shadow: 0 0 18px rgba(168, 85, 247, .6); }
.cos-brand b { display: block; font-size: 20px; font-weight: 900; line-height: 1; }
.cos-brand sup { font-size: 9px; }
.cos-brand small { display: block; font-weight: 700; color: var(--cos-soft); }
.cos-tabs { flex: 1; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cos-tabs a { padding: 9px 22px; border-radius: 999px; font-weight: 700; color: #e8e4ff !important; }
.cos-tabs a.on { background: linear-gradient(135deg, #6d4cf5, #5b3fd6); box-shadow: 0 0 0 1px rgba(170, 150, 255, .5), 0 0 22px rgba(109, 76, 245, .55); }
.cos-icons { display: flex; align-items: center; gap: 14px; font-size: 20px; }
.cos-icons > a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.cos-avatar, .cos-me img { width: 42px !important; height: 42px !important; border-radius: 50%; object-fit: cover; }

.cos-body { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 14px; }

/* sidebar */
.cos-side { display: flex; flex-direction: column; gap: 4px; }
.cos-side > a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; font-weight: 700; font-size: 14.5px; color: #e9e5ff !important; }
.cos-side > a i { font-style: normal; width: 22px; text-align: center; }
.cos-side > a:hover { background: rgba(255, 255, 255, .06); }
.cos-side > a.on { background: linear-gradient(135deg, #6d4cf5, #5b3fd6); box-shadow: 0 0 20px rgba(109, 76, 245, .5); }
.cos-identity { margin-top: 18px; padding: 22px 14px; border-radius: 18px; text-align: center; background: linear-gradient(160deg, rgba(91, 63, 214, .35), rgba(168, 85, 247, .25));
  border: 1px solid var(--cos-line); box-shadow: inset 0 -30px 40px rgba(217, 70, 239, .25); }
.cos-identity span { display: block; font-size: 44px; filter: drop-shadow(0 0 12px rgba(168, 85, 247, .8)); }
.cos-identity b { font-size: 16px; line-height: 1.25; }

/* row 1: hero + join */
.cos-row1 { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 14px; }
.cos-hero { position: relative; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1fr); align-items: center; border-radius: 22px; overflow: hidden;
  background: radial-gradient(500px 360px at 70% 50%, rgba(80, 120, 255, .35), transparent 70%), rgba(20, 14, 70, .55); border: 1px solid rgba(140, 120, 255, .18); }
.cos-hero-text { padding: 40px 10px 20px 32px; position: relative; z-index: 2; }
.cos-hero h1 { font-size: clamp(34px, 3.3vw, 54px); font-weight: 900; line-height: 1.06; letter-spacing: -.01em; }
.cos-hero h1 em { font-style: normal; background: linear-gradient(90deg, #f0abfc, #c084fc 55%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cos-who { margin: 12px 0 18px; font-weight: 800; font-size: 15px; word-spacing: 2px; }
.cos-lead { margin: 0 0 22px; color: #dcd7ff; font-weight: 600; line-height: 1.55; font-size: 14.5px; }
.cos-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.cos-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--cos-grad);
  color: #fff !important; font: 800 15px 'Nunito', sans-serif; cursor: pointer; box-shadow: 0 0 22px rgba(217, 70, 239, .45); }
.cos-btn.ghost { background: transparent; border: 1.5px solid rgba(220, 210, 255, .55); box-shadow: none; }
.cos-art { position: relative; align-self: stretch; }
.cos-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 92%, transparent 100%); }
.cos-pin { position: absolute; border-radius: 14px; }
.cos-pin:hover { box-shadow: 0 0 0 2px #e9d5ff, 0 0 24px rgba(217, 70, 239, .7); }
.cos-pin-1 { left: 6.6%; top: 4.9%; width: 22.5%; height: 17%; }   /* Harvard */
.cos-pin-2 { left: 1%; top: 36%; width: 22%; height: 17%; }        /* Stanford */
.cos-pin-3 { left: 7%; top: 67%; width: 22.5%; height: 16.5%; }    /* MIT */
.cos-pin-4 { left: 65%; top: 4%; width: 21%; height: 16%; }        /* Oxford */
.cos-pin-5 { left: 76.5%; top: 28.7%; width: 22.5%; height: 16.3%; } /* IIT Madras */
.cos-pin-6 { left: 74%; top: 63.6%; width: 22.7%; height: 16.4%; } /* IIT Bombay */
.cos-features { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 12px 18px 16px; position: relative; z-index: 2;
  background: linear-gradient(0deg, rgba(20, 14, 70, .85), rgba(20, 14, 70, .35)); }
.cos-features span { text-align: center; font-size: 13px; font-weight: 700; line-height: 1.3; color: #e6e1ff; }
.cos-features i { display: block; font-style: normal; font-size: 24px; margin-bottom: 6px; filter: drop-shadow(0 0 8px rgba(168, 85, 247, .8)); }

.cos-join { padding: 22px 22px 24px; border-radius: 22px; background: linear-gradient(165deg, rgba(91, 63, 214, .45), rgba(40, 24, 110, .75));
  border: 1.5px solid rgba(170, 150, 255, .55); box-shadow: 0 0 30px rgba(109, 76, 245, .35), inset 0 0 40px rgba(139, 92, 246, .15); }
.cos-join-head { display: flex; gap: 14px; align-items: flex-start; }
.cos-join-head > span { font-size: 40px; filter: drop-shadow(0 0 10px rgba(168, 85, 247, .8)); }
.cos-join h2 { font-size: 24px; font-weight: 900; }
.cos-join-head p { margin: 4px 0 0; color: #dcd7ff; font-weight: 600; font-size: 14px; }
.cos-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 8px; padding: 0; list-style: none; position: relative; }
.cos-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 17px; height: 2px; background: rgba(200, 190, 255, .35); }
.cos-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #d8d2ff; }
.cos-steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3b2a8f; border: 2px solid rgba(200, 190, 255, .5); }
.cos-steps li.on b { background: var(--cos-grad); border-color: #f5d0fe; box-shadow: 0 0 16px rgba(217, 70, 239, .8); }
.cos-join-form { display: flex; flex-direction: column; gap: 12px; }
.cos-join-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.cos-join-form select { padding: 11px 12px; border-radius: 10px; border: 0; background: #f5f3ff; color: #1d1747; font: 700 14.5px 'Nunito', sans-serif; }
.cos-continue { width: 100%; margin-top: 10px; padding: 14px; font-size: 17px; border-radius: 14px; }

/* row 2: three lavender panels */
.cos-row2 { display: grid; grid-template-columns: 1.05fr .88fr .93fr; gap: 12px; margin-top: 12px; }
.cos-panel { padding: 18px 18px 16px; border-radius: 22px; background: var(--cos-panel); color: var(--cos-panel-ink); box-shadow: 0 10px 30px rgba(10, 6, 40, .35); }
.cos-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cos-panel-head > span { font-size: 34px; }
.cos-panel h2 { font-size: 20px; font-weight: 900; }
.cos-panel-head p { margin: 2px 0 0; font-weight: 600; color: #3d3570; }
.cos-search { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(40, 20, 120, .12); }
.cos-search input { flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: none; font: 600 14px 'Nunito', sans-serif; background: transparent; }
.cos-search a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #efeafe; }
.cos-subtabs { display: flex; gap: 6px; margin: 14px 0 12px; border-bottom: 1px solid #ddd5fb; }
.cos-subtabs button { padding: 8px 14px; border: 0; background: none; font: 700 14px 'Nunito', sans-serif; color: #3d3570; cursor: pointer; border-bottom: 3px solid transparent; }
.cos-subtabs button.on { color: #5b3fd6; border-bottom-color: #6d4cf5; }
.cos-unis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cos-unis a { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(40, 20, 120, .12); }
.cos-unis img { width: 100%; height: 70px; object-fit: cover; }
.cos-unis b { padding: 5px 8px 0; font-size: 13px; }
.cos-unis small { padding: 0 8px 7px; color: #5b5385; font-weight: 700; font-size: 11.5px; }
.cos-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; }
.cos-chips a { padding: 6px 12px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 1px 4px rgba(40, 20, 120, .12); }
.cos-ranked { margin: 0; padding-left: 22px; columns: 2; font-weight: 700; font-size: 13.5px; }
.cos-ranked li { margin-bottom: 4px; }
.cos-ranked small { margin-left: 6px; color: #6b6396; }
.cos-more { display: inline-block; margin-top: 6px; font-weight: 800; color: #5b3fd6 !important; }

.cos-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cos-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 76px; padding: 8px; border-radius: 14px; text-align: center;
  font-weight: 800; font-size: 13.5px; line-height: 1.2; box-shadow: 0 2px 8px rgba(40, 20, 120, .1); }
.cos-tile i { font-style: normal; font-size: 22px; margin-bottom: 4px; }
.cos-tile small { font-weight: 700; font-size: 12.5px; }
.cos-tile.violet { background: #ede7ff; color: #4c2fbf; } .cos-tile.blue { background: #e3edff; color: #234ab8; }
.cos-tile.orange { background: #ffecdc; color: #b5520f; } .cos-tile.green { background: #e2f7ec; color: #17784a; }
.cos-tile.gold { background: #fff3d6; color: #9a6a00; } .cos-tile.pink { background: #fde7f4; color: #b0247a; }

.cos-campus-img img { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: 14px; }
.cos-campus-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.cos-campus-tabs a { display: flex; flex-direction: column; align-items: center; padding: 7px 4px; border-radius: 12px; background: #fff; font-weight: 700; font-size: 12.5px;
  box-shadow: 0 1px 5px rgba(40, 20, 120, .1); }
.cos-campus-tabs i { font-style: normal; font-size: 19px; }
.cos-campus h3 { font-size: 15px; font-weight: 900; margin: 4px 0 8px; }
.cos-campus h3 small { font-weight: 700; color: #5b5385; }
.cos-auto { display: flex; flex-wrap: wrap; gap: 6px; }
.cos-auto span { padding: 6px 12px; border-radius: 999px; background: #ece6ff; color: #3b2a8f; font-weight: 800; font-size: 12.5px; }

/* skyline + numbers */
.cos-foot { position: relative; margin: 14px -14px 0; }
.cos-skyline { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%); mask-image: linear-gradient(180deg, transparent, #000 35%); }
.cos-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 14px; padding: 12px 28px 22px; margin-top: -54px; position: relative;
  background: linear-gradient(0deg, #1b1350 40%, transparent); }
.cos-stats > span { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; font-weight: 700; color: #dcd7ff; }
.cos-stats i { grid-row: span 2; font-style: normal; font-size: 30px; }
.cos-stats b { font-size: 22px; font-weight: 900; color: #fff; }
.cos-pill { display: flex !important; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 999px; background: rgba(91, 63, 214, .55);
  border: 1.5px solid rgba(200, 180, 255, .6); color: #fff !important; font-weight: 900 !important; font-size: 17px; }
.cos-pill em { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cos-grad); font-style: normal; }

/* smaller screens */
@media (max-width: 1350px) { .cos-row2 { grid-template-columns: 1fr 1fr; } .cos-campus { grid-column: 1 / -1; } .cos-unis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .cos-row1 { grid-template-columns: 1fr; } .cos-body { grid-template-columns: 1fr; } .cos-side { display: none; } }
@media (max-width: 760px) {
  .cos-top { flex-wrap: wrap; } .cos-tabs { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .cos-tabs a { white-space: nowrap; padding: 8px 14px; }
  .cos-hero { grid-template-columns: 1fr; } .cos-hero-text { padding: 26px 20px 8px; text-align: center; } .cos-cta { justify-content: center; }
  .cos-features { grid-template-columns: repeat(4, 1fr); } .cos-row2 { grid-template-columns: 1fr; } .cos-unis { grid-template-columns: repeat(3, 1fr); }
  .cos-ranked { columns: 1; } .cos-stats { justify-content: center; }
}

/* the directory continues below the design (app/colleges.html): back to the normal wide page width */
.cos ~ .sfp-page { width: 100%; max-width: 1480px; margin: 22px auto 40px; padding: 0 16px; }
.cos { min-height: 100vh; }

/* ── fit the first screen like the mockup: line icons, tighter spacing, no gap above ── */
@media (min-width: 900px) { body:has(.cos) { margin-top: 0 !important; padding-top: 0 !important; } }
.cos svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cos-icons svg { width: 22px; height: 22px; color: #fff; }
.cos-side > a svg { color: #c4b5fd; }
.cos-side > a.on svg { color: #fff; }
.cos-identity svg { display: block; width: 58px; height: 58px; margin: 0 auto 8px; color: #e9d5ff; filter: drop-shadow(0 0 12px rgba(168, 85, 247, .9)); }
.cos-features svg { display: block; width: 28px; height: 28px; margin: 0 auto 6px; color: #c4b5fd; filter: drop-shadow(0 0 6px rgba(168, 85, 247, .7)); }
.cos-join-head > svg { width: 46px; height: 46px; color: #e9d5ff; filter: drop-shadow(0 0 10px rgba(168, 85, 247, .8)); }
.cos-panel-head > svg { width: 38px; height: 38px; color: #4c2fbf; }
.cos-search svg { width: 20px; height: 20px; color: #3b2a8f; }
.cos-tile svg { width: 24px; height: 24px; margin-bottom: 4px; }
.cos-campus-tabs svg { width: 22px; height: 22px; color: #6d4cf5; }
.cos-auto svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: #fff; fill: #6d4cf5; stroke: #fff; }
.cos-stats svg { grid-row: span 2; width: 34px; height: 34px; color: #e9d5ff; }

.cos { padding-top: 6px; }
.cos-top { padding-bottom: 6px; }
.cos-side > a { padding: 7px 12px; font-size: 14px; }
.cos-identity { margin-top: 10px; padding: 16px 12px; }
.cos-row1 { grid-template-columns: minmax(0, 1fr) 360px; }
.cos-hero { grid-template-columns: 37% 63%; }
.cos-hero-text { padding: 26px 6px 6px 30px; }
.cos-hero h1 { font-size: clamp(30px, 2.55vw, 46px); }
.cos-hero h1 em { white-space: nowrap; }
.cos-who { margin: 8px 0 12px; font-size: 14px; }
.cos-lead { margin-bottom: 16px; font-size: 13.5px; }
.cos-art { align-self: center; }
.cos-art img { height: auto; aspect-ratio: 1340 / 652; object-fit: contain; }
.cos-features { padding: 6px 16px 10px; }
.cos-features span { font-size: 12.5px; }
.cos-join { padding: 16px 18px 18px; }
.cos-join h2 { font-size: 22px; }
.cos-steps { margin: 12px 0 4px; }
.cos-join-form { gap: 8px; }
.cos-join-form select { padding: 8px 10px; }
.cos-continue { margin-top: 6px; padding: 11px; }
.cos-row2 { margin-top: 10px; }
.cos-panel { padding: 14px 16px 12px; }
.cos-panel-head { margin-bottom: 8px; }
.cos-panel h2 { font-size: 18px; }
.cos-search input { padding: 9px 0; }
.cos-subtabs { margin: 10px 0 8px; }
.cos-subtabs button { padding: 6px 12px; }
.cos-unis img { height: 58px; }
.cos-tiles { gap: 8px; }
.cos-tile { min-height: 62px; padding: 6px; font-size: 12.5px; }
.cos-campus-img img { height: 78px; }
.cos-campus-tabs { margin: 8px 0; }
.cos-campus h3 { margin: 2px 0 6px; }
.cos-foot { margin-top: 6px; }
.cos-skyline { height: 110px; }
.cos-stats { margin-top: -46px; padding: 6px 28px 14px; }
.cos-stats b { font-size: 20px; }
.cos-pill { font-size: 15px; }
/* the skyline runs under the sidebar too; buttons side by side; names on one line */
.cos-foot { margin: 4px -14px 0; }
.cos-skyline { height: 96px; }
.cos-stats { margin-top: -40px; padding: 4px 28px 10px; }
.cos-cta { flex-wrap: nowrap; gap: 10px; }
.cos-cta .cos-btn { padding: 10px 16px; font-size: 14px; white-space: nowrap; }
.cos-unis b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-hero-text { padding-top: 20px; }
.cos-features svg { width: 24px; height: 24px; margin-bottom: 4px; }
@media (max-width: 760px) { .cos-cta { flex-wrap: wrap; } }

/* phones and small laptops again (the rules above came after the earlier media queries) */
@media (max-width: 1350px) { .cos-row2 { grid-template-columns: 1fr 1fr; } .cos-campus { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .cos-row1 { grid-template-columns: 1fr; } .cos-body { grid-template-columns: 1fr; } .cos-side { display: none; } }
@media (max-width: 760px) {
  .cos-hero { grid-template-columns: 1fr; } .cos-hero-text { padding: 22px 18px 6px; text-align: center; } .cos-cta { justify-content: center; flex-wrap: wrap; }
  .cos-hero h1 em { white-space: normal; } .cos-features { grid-template-columns: repeat(4, 1fr); }
  .cos-row2 { grid-template-columns: 1fr; } .cos-unis { grid-template-columns: repeat(3, 1fr); } .cos-stats { margin-top: -20px; justify-content: center; }
}
.cos-body > *, .cos-row1 > *, .cos-row2 > *, .cos-hero > * { min-width: 0; }
.cos { overflow-x: hidden; }

/* ── no empty bands in the hero (as in the mockup): the artwork runs from the top edge down behind the feature row, and the
   join card is tightened so it no longer stretches the row; the top bar wears the site's own rainbow navbar ── */
.cos-top { margin: -6px -14px 10px; padding: 8px 20px; background: linear-gradient(90deg, #2f6bff 0.00%, #0a8cff 4.55%, #00b4d0 9.09%, #12b886 13.64%, #4fcf3a 18.18%, #f4b400 22.73%, #ff7b25 27.27%, #ff4f6d 31.82%, #f03e9b 36.36%, #c44ee6 40.91%, #7b5cff 45.45%, #2f6bff 50.00%, #0a8cff 54.55%, #00b4d0 59.09%, #12b886 63.64%, #4fcf3a 68.18%, #f4b400 72.73%, #ff7b25 77.27%, #ff4f6d 81.82%, #f03e9b 86.36%, #c44ee6 90.91%, #7b5cff 95.45%, #2f6bff 100.00%);
  background-size: 200% 100%; animation: sf-rainbow-flow 30s linear infinite; animation-delay: var(--sf-rainbow-delay, 0s);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 0 8px rgba(0, 0, 0, .12); }
@media (prefers-reduced-motion: reduce) { .cos-top { animation-duration: 180s; } }
.cos-top .cos-brand small { color: #fff; }
.cos-top .cos-logo { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.cos-top .cos-tabs a.on { background: rgba(255, 255, 255, .24); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); }
.cos-top .cos-icons > a { background: rgba(255, 255, 255, .18); }
.cos-top svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .38)); }

.cos-hero { align-items: stretch; }
.cos-hero-text { align-self: center; }
.cos-art { align-self: start; }
.cos-art img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 92%, transparent 100%), linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 92%, transparent 100%), linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.cos-features { margin-top: -30px; padding: 0 16px 10px; }
.cos-join { padding: 14px 18px 16px; }
.cos-steps { margin: 10px 0 2px; }
.cos-join-form { gap: 6px; }
.cos-join-form label { margin: 0; gap: 3px; }
.cos-join-form select { padding: 7px 10px; height: auto; }
@media (max-width: 760px) { .cos-top { margin: -6px -14px 8px; padding: 6px 12px; } .cos-features { margin-top: 0; } }

/* ── swapped rows: the numbers sit in the hero, the seven features run along the skyline ── */
.cos-hstats { grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 22px 14px; }
.cos-hstats span { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 10px; align-items: center; text-align: left;
  font-size: 13.5px; color: #dcd7ff; }
.cos-hstats svg { grid-row: span 2; width: 32px !important; height: 32px !important; margin: 0 !important; color: #e9d5ff; }
.cos-hstats b { font-size: 20px; font-weight: 900; color: #fff; line-height: 1.1; }
.cos-feats { justify-content: space-around; gap: 10px; }
.cos-feats > span:not(.cos-pill) { display: block; text-align: center; font-size: 13px; line-height: 1.25; color: #fff;
  text-shadow: 0 1px 3px rgba(20, 10, 60, .8); }
.cos-feats > span:not(.cos-pill) svg { display: block; width: 24px; height: 24px; margin: 0 auto 4px; color: #e9d5ff; filter: drop-shadow(0 0 6px rgba(168, 85, 247, .8)); }
@media (max-width: 760px) { .cos-hstats { grid-template-columns: repeat(2, 1fr); row-gap: 10px; } .cos-feats { justify-content: center; } }
/* the skyline of landmarks travels with the numbers into the hero; the feature strip below stands on its own band */
.cos-hstats { margin: -54px 0 0; padding: 62px 22px 12px; align-items: end; border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(20, 14, 70, 0) 0%, rgba(20, 14, 70, .05) 35%, rgba(22, 15, 72, .72) 72%, rgba(22, 15, 72, .92) 100%),
              var(--cos-sky) center 62% / cover no-repeat; }
.cos-hstats span { text-shadow: 0 1px 3px rgba(20, 10, 60, .8); }
.cos-foot { margin: 10px 0 0; }
.cos-foot .cos-feats { margin: 0; padding: 12px 24px; border-radius: 22px; background: rgba(20, 14, 70, .55); border: 1px solid rgba(140, 120, 255, .18); }
.cos-feats > span:not(.cos-pill) { text-shadow: none; color: #e6e1ff; }
@media (max-width: 760px) { .cos-hstats { margin-top: 0; padding-top: 70px; } }
.cos-hstats { margin: 4px 0 0; padding: 74px 22px 12px; background-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42%); mask-image: linear-gradient(180deg, transparent 0, #000 42%); }
/* the skyline twice, as in the mockup: behind the numbers in the hero (pulled up under the artwork's faded foot) and
   behind the feature strip at the bottom of the page */
.cos-hstats { margin: -34px 0 0; padding: 60px 22px 12px; }
.cos-foot { margin: 6px -14px 0; }
.cos-foot .cos-feats { margin: 0; padding: 70px 28px 12px; border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgba(17, 13, 58, 0) 0%, rgba(17, 13, 58, .05) 35%, rgba(20, 14, 66, .75) 74%, rgba(20, 14, 66, .95) 100%),
              var(--cos-sky) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%); mask-image: linear-gradient(180deg, transparent 0, #000 38%); }
.cos-feats > span:not(.cos-pill) { color: #fff; text-shadow: 0 1px 3px rgba(20, 10, 60, .85); }
/* the feature labels sit in the middle of the bottom skyline, not pushed to its foot */
.cos-foot .cos-feats { align-items: center; min-height: 150px; padding: 36px 28px 30px; }
/* the skyline lives on a layer behind each row (its fade no longer dims the text), and each row's line sits in its middle */
.cos-hstats, .cos-foot .cos-feats { position: relative; z-index: 0; isolation: isolate; background: none !important;
  -webkit-mask-image: none !important; mask-image: none !important; }
.cos-hstats::before, .cos-foot .cos-feats::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, rgba(20, 14, 70, 0) 0%, rgba(20, 14, 70, .1) 40%, rgba(22, 15, 72, .7) 78%, rgba(22, 15, 72, .9) 100%),
              var(--cos-sky) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); }
.cos-hstats { align-items: center; min-height: 128px; padding: 42px 22px 18px; }
.cos-hstats span { align-self: center; }
.cos-credit { display: block; margin: 3px 2px 0; text-align: right; font-size: 10.5px; color: #8a83b8 !important; }
/* bottom: the whole panorama across the page width, Taj Mahal first, as in the mockup (no zoom) */
.cos-foot .cos-feats::before { background: linear-gradient(180deg, rgba(20, 14, 70, 0) 0%, rgba(20, 14, 70, 0) 45%, rgba(22, 15, 72, .55) 80%, rgba(22, 15, 72, .85) 100%),
  var(--cos-sky) left bottom / 100% auto no-repeat; }
/* middle too: the whole panorama across the hero, Taj Mahal first */
.cos-hstats::before { background: linear-gradient(180deg, rgba(20, 14, 70, 0) 0%, rgba(20, 14, 70, 0) 40%, rgba(22, 15, 72, .55) 80%, rgba(22, 15, 72, .85) 100%),
  var(--cos-sky) left bottom / 100% auto no-repeat; }
/* as in the mockup: the landmarks stand clear on top, the text runs on a dark strip beneath them (never over them) */
.cos-hstats { min-height: 0; padding: 96px 22px 12px; align-items: center; }
.cos-hstats::before { background: linear-gradient(180deg, rgba(22, 15, 72, 0) 0, rgba(22, 15, 72, 0) 84px, rgba(22, 15, 72, .92) 100px),
  var(--cos-sky) left top / auto 100px no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px); mask-image: linear-gradient(180deg, transparent 0, #000 34px); }
.cos-foot .cos-feats { min-height: 0; padding: calc(5.02vw + 8px) 28px 12px; align-items: center; }
.cos-foot .cos-feats::before { background: linear-gradient(180deg, rgba(22, 15, 72, 0) 0, rgba(22, 15, 72, 0) calc(5.02vw - 10px), rgba(22, 15, 72, .95) 5.02vw),
  var(--cos-sky) left top / 100% auto no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px); mask-image: linear-gradient(180deg, transparent 0, #000 24px); }
/* visitors (the front page is public): a Log in pill where members see the bell and their photo */
.cos-icons > a.cos-login { width: auto; height: auto; padding: 9px 22px; border-radius: 999px; background: rgba(255, 255, 255, .24);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); font-weight: 800; font-size: 15px; color: #fff !important; }
/* the numbers sit on the middle line of the dark strip under the middle skyline */
.cos-hstats { padding: 108px 22px 20px; }
/* equal room above and below the numbers on the dark strip (it starts where the skyline ends, 100px down) */
.cos-hstats { padding: 115px 22px 15px; }