/* Jelia.nyc — palette sampled directly from the logo artwork, not guessed.
   The mark lives on #222222, so the page does too: the lockup then sits on the
   page with no visible edge. Accents are the logo's own steel-and-jewel tones
   (muted, not MTA-bright), used the way a transit map uses colour — to mark a
   line, never as decoration. */
:root{
  --navy:#222222; --navy-2:#2b2b2b; --navy-3:#1b1b1b; --navy-4:#171717;
  --cyan:#939393; --cyan-2:#afafaf;
  --blue:#535353; --yellow:#c4c4c4; --red:#494949; --slate:#686868;
  --ink:#f1f1f1; --ink-2:#bebebe; --muted:#929292;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--navy)}
body{margin:0;background:var(--navy);color:var(--ink);
  font:400 17px/1.7 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
main{background:var(--navy)}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;line-height:1.14;
  margin:0 0 .5em;letter-spacing:-.02em;color:#ffffff}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.55rem,3vw,2.3rem)}
h3{font-size:1.1rem;line-height:1.3}
p{margin:0 0 1.1em}
a{color:var(--cyan);text-underline-offset:3px}
/* height:auto is not optional here. The <img> tags carry width/height
   attributes (good — they reserve space and stop layout shift), but with
   only max-width set the browser honours the literal height attribute and
   the logo renders stretched. */
img,svg{max-width:100%;height:auto;display:block}
.wrap{width:min(var(--wrap),100% - 12rem);margin-inline:auto}
@media(max-width:1100px){.wrap{width:min(var(--wrap),100% - 6rem)}}
@media(max-width:820px){.wrap{width:min(var(--wrap),100% - 3rem)}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:#ffffff;color:#000000;padding:.7rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px}

header{background:rgba(27,27,27,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:1.2rem;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand img{width:26px;height:auto}
.brand b{font-family:"Chakra Petch","Space Grotesk",sans-serif;font-size:1.2rem;font-weight:600;
  letter-spacing:.01em;color:#ffffff}
.brand b span{color:var(--cyan)}
nav{margin-left:auto;display:flex;gap:1.4rem}
nav a{color:var(--ink-2);text-decoration:none;font-size:.93rem;font-weight:500}
nav a:hover{color:#ffffff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.6rem;
  border-radius:6px;text-decoration:none;font-weight:600;font-size:1rem;border:1.5px solid transparent}
.btn-p{background:var(--cyan);color:#111111}
.btn-p:hover{background:var(--cyan-2)}
.btn-s{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.34)}
.btn-s:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-d{background:var(--cyan);color:#111111}

/* hero — the lockup sits on the same navy it was drawn on */
.hero{padding:4.5rem 0 4.5rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(880px 420px at 82% 24%,rgba(147,147,147,.13),transparent 64%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;
  gap:3.5rem;align-items:center}
.hero .lead{font-size:1.18rem;color:var(--ink-2);max-width:52ch}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero .lockup{width:min(330px,100%);margin-inline:auto}
.eyebrow{font-family:"Chakra Petch","Space Grotesk",sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.75rem;font-weight:600;color:var(--cyan);margin:0 0 .9rem}

section{padding:4.6rem 0;border-top:1px solid var(--line)}
.alt{background:var(--navy-3)}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2.4rem}
/* Cards carry a coloured rule on the left — the "line" the service runs on. */
.card{background:var(--navy-2);border:1px solid var(--line);border-left:3px solid var(--slate);
  border-radius:8px;padding:1.5rem 1.5rem}
.card p{margin:0;color:var(--ink-2);font-size:.97rem}
.card h3{margin-bottom:.45rem}
.card .n{font-family:"Chakra Petch","Space Grotesk",sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.c-cyan{border-left-color:var(--cyan)} .c-blue{border-left-color:var(--blue)}
.c-yellow{border-left-color:var(--yellow)} .c-red{border-left-color:var(--red)}

/* station-dot list */
.ticks{list-style:none;padding:0;margin:1.6rem 0 0}
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 3px rgba(147,147,147,.18)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem;margin-top:2.2rem}
.stat{border-top:2px solid var(--cyan);padding-top:.9rem}
.stat b{display:block;font-family:"Chakra Petch","Space Grotesk",sans-serif;font-size:2rem;
  color:#ffffff;line-height:1;letter-spacing:.01em}
.stat span{font-size:.88rem;color:var(--muted)}

footer{background:var(--navy-4);color:var(--muted);padding:3rem 0 2.4rem;font-size:.92rem;
  border-top:1px solid var(--line)}
footer a{color:var(--ink-2)}
.fbot{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:1.8rem;display:flex;
  gap:1rem;flex-wrap:wrap;justify-content:space-between}

@media(max-width:900px){
  .hero{padding:2.8rem 0 3rem}
  .hero .wrap{grid-template-columns:1fr;gap:1.8rem}
  .hero .lockup{width:210px;margin:0}
  nav{display:none}
  section{padding:3.2rem 0}
  .hero .cta .btn{flex:1 1 100%}
}


/* ---- The stack: framed application marks -------------------------------
   Eight-plus vendors means eight-plus brand palettes, which would shatter the
   transit palette this page is built on. So each mark is a monochrome glyph
   tinted with the page's own ink, seated in an IDENTICAL 54px plate. Uniform
   frame, uniform optical weight - the logos read as one set instead of a
   sponsor wall, and no vendor shouts louder than another.
   The accent classes (.c-cyan etc.) are reused from the cards above so the
   left rule keeps meaning "the line this service runs on". */
.apps{display:grid;gap:1.1rem;margin-top:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(304px,1fr))}
.app{--a:var(--slate);display:flex;flex-direction:column;gap:.85rem;
  background:var(--navy-2);border:1px solid var(--line);border-left:3px solid var(--a);
  border-radius:8px;padding:1.35rem 1.4rem 1.15rem;text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease,background .18s ease}
.app.c-cyan{--a:var(--cyan)} .app.c-blue{--a:var(--blue)}
.app.c-yellow{--a:var(--yellow)} .app.c-red{--a:var(--red)}

.app .head{display:flex;align-items:center;gap:1rem}
/* The frame itself. Fixed box + grid centring means a wide mark and a tall
   mark occupy exactly the same footprint. */
.app .plate{flex:0 0 auto;width:54px;height:54px;border-radius:11px;
  background:var(--navy-3);border:1px solid var(--line-2);display:grid;place-items:center;
  transition:border-color .18s ease,background .18s ease}
.app .plate svg{width:26px;height:26px;fill:var(--ink-2);transition:fill .18s ease}
.app .meta{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.app .nm{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;font-size:1.06rem;color:#ffffff;
  line-height:1.2}
/* The category line, in the same uppercase register as the card numbers above,
   so it reads as a label rather than as prose. */
.app .rl{font-family:"Chakra Petch","Space Grotesk",sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--a);line-height:1.35}
.app .ds{font-size:.93rem;line-height:1.6;color:var(--ink-2)}
/* Always visible now: the cards are tall enough to carry it, and a touch screen
   has no hover with which to reveal it. */
.app .host{margin-top:auto;padding-top:.55rem;border-top:1px solid var(--line);
  font-family:"Chakra Petch","Space Grotesk",sans-serif;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);transition:color .18s ease}
a.app:hover{border-color:var(--a);background:#2f2f2f;transform:translateY(-2px)}
a.app:hover .plate{border-color:var(--a);background:var(--navy-4)}
a.app:hover .plate svg{fill:var(--a)}
a.app:hover .host{color:var(--a)}
a.app:focus-visible{border-color:var(--a)}
@media(prefers-reduced-motion:reduce){.app,.app .plate,.app .plate svg,.app .host{transition:none}
  a.app:hover{transform:none}}

.sub-eyebrow{margin-top:3.6rem}
.sub-h{font-size:1.35rem;margin-bottom:.6rem}
.fineprint{margin-top:1.8rem;font-size:.82rem;color:var(--muted);max-width:64ch}