/* Page-specific styles for premium/index.html only. .landing-screen is a
   dedicated first viewport — nav, hero copy and both route doors fit
   inside it with no scrolling. The footer lives outside that shell, in
   normal flow, so it's reachable by scrolling rather than being squeezed
   into the same screen. */
.landing-screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
.landing-screen .hero-wrap{flex:1;display:flex;min-height:0;}
.landing-screen .hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px 0;min-height:0;}

.h1{font-size:clamp(28px,4.2vw + 1vh,54px);max-width:820px;margin-bottom:0;line-height:1.12;}
.h1 em{font-weight:300;color:var(--ink-soft);}

/* Hierarchy: large hero statement, then clearly-visible route names,
   then the quiet question introducing them — label stays small/regular
   weight so it doesn't compete with the names below it.

   Routes use CSS table display (not flex) so the two rows share real,
   browser-measured columns: the name column auto-sizes to whichever
   label is longest, and both arrows land in that same column position
   without guessing a fixed width. table-row/table-cell also means the
   whole block shrinks to fit its content width automatically, instead
   of stretching into empty space. */
.routes-label{font-size:20px;font-weight:400;color:var(--ink);margin-top:clamp(32px,6vh,52px);}
@media(max-width:640px){
  .routes-label{font-size:18px;}
}
.routes-label + .routes{margin-top:0;}

.routes{display:table;border-collapse:collapse;margin-top:clamp(28px,6vh,52px);align-self:flex-start;}
.route{display:table-row;cursor:pointer;color:inherit;text-decoration:none;transition:background .2s ease;}
.route:hover{background:#EFE9DB;}
.route-name{display:table-cell;vertical-align:middle;font-size:clamp(22px,1.6vw + 0.8vh,28px);font-weight:700;letter-spacing:-.005em;white-space:nowrap;padding:clamp(10px,2vh,16px) 32px clamp(10px,2vh,16px) 0;border-bottom:1px solid var(--hair);}
.route-marker-cell{display:table-cell;vertical-align:middle;padding:clamp(10px,2vh,16px) 0;border-bottom:1px solid var(--hair);}
.route:last-child .route-name,.route:last-child .route-marker-cell{border-bottom:none;}
.route-marker{width:44px;height:44px;border-radius:50%;border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:17px;transition:background .2s ease,color .2s ease,transform .25s ease;}
.route:hover .route-marker{background:var(--accent);color:var(--paper);transform:translateX(4px);}