/* The public homepage ("Together We Connect"), live at / since 10/6; the classic page is at /home-classic. */
/* Brand typeface: Manrope (free, self-hosted variable 200-800), tuned to sit as close to Aeonik Pro as it can:
   x-height scaled down to Aeonik's (0.52) with font-size-adjust, weights pushed heavier (Aeonik's stems are thicker:
   400->470, 500->620, 600->720), -0.007em tighter letters and +0.055em wider word gaps. Measured with a canvas overlay against the
   Aeonik Pro trial (not shipped). The Iowan italic accent words are left untouched. */
@font-face {
  font-family: Manrope;
  src: url(/static/fonts/Manrope-Variable.woff2) format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --magenta: #e20074;
  --violet: #7c3aed;
  --ink: #17121c;
  --green: #13b981;
  --red: #e5485f;
  --bg: #ffffff;
  --surface: #f9f9fa;
  --hairline: rgba(23, 18, 28, 0.1);
  --grad: linear-gradient(90deg, #ff2d7a, #e20074 38%, #a12bd4 72%, #7c3aed);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 470;
  font-size-adjust: 0.52;
  letter-spacing: -0.007em;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

:where(body, body *) { word-spacing: 0.055em; }

.serif {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size-adjust: none;
  word-spacing: normal;
}
h1 .serif { letter-spacing: -0.03em; }
h2 .serif { letter-spacing: -0.025em; }


.tabular { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; border: none; }

*:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography */
h1 { font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: -0.04em; line-height: 1.05; font-weight: 620; margin-bottom: 24px; }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.032em; line-height: 1.1; font-weight: 620; margin-bottom: 16px; }
.lede { font-size: clamp(1.125rem, 2vw, 1.375rem); color: rgba(255,255,255,0.8); max-width: 600px; margin-bottom: 40px; font-weight: 470; }
p { font-size: 16px; letter-spacing: -0.007em; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 99px;
  font-weight: 620;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-w { background: #fff; color: var(--ink); }
.btn-w:hover { background: #f3f4f6; }
.btn-o { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); }
.btn-o:hover { background: rgba(255,255,255,0.25); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2a2233; }
.btn svg { width: 18px; height: 18px; }

/* Nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  z-index: 100;
  transition: background 0.3s, border 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.nav.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.nav:not(.scrolled) { color: #fff; }
/* Lockup (Lorend's final word 10/6): the ORIGINAL gradient cube (740:832,
   lr-cube-mark.svg) beside the LRT letters as a mask in the current text
   colour — white on the hero, purple once the bar turns white. Letters are
   860:421 and 0.78 of the cube's height. The lettered cube is for the
   favicon, tile, splash and avatars only. */
.nav .brand { display: flex; align-items: center; gap: 10px; }
.nav .brand .cube { width: 32px; height: 36px; display: block; }
.wm {
  display: block; background: currentColor;
  -webkit-mask: url(/static/img/home/lr-wordmark.svg) no-repeat left center / contain;
  mask: url(/static/img/home/lr-wordmark.svg) no-repeat left center / contain;
}
.nav .brand .wm { width: 57px; height: 28px; }
.nav.scrolled .brand { color: #52178b; }
.nav .links { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 620; }
.nav .links a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
.nav .links .btn { height: 40px; padding: 0 20px; font-size: 14px; }
/* Over the photo: Team login keeps its original soft glass (Lorend 10/7:
   "go back to how it looked before"). */
.nav:not(.scrolled) .links .btn { background: rgba(255,255,255,0.15); color: #fff; }
.nav:not(.scrolled) .links .btn:hover { background: rgba(255,255,255,0.25); }
/* On the white bar after scrolling: light, mostly see-through liquid glass —
   a faint fill, backdrop blur, hairline edge and a soft top highlight. Never
   a solid, black or magenta pill. */
.nav.scrolled .links .btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 70%), rgba(26,16,32,0.025);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  color: var(--ink);
  border: 1px solid rgba(26,16,32,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 2px 10px rgba(26,16,32,0.05);
}
.nav.scrolled .links .btn:hover { background: rgba(26,16,32,0.05); }
/* Español / English (10/20): the same glass pill as Team login, a touch
   lighter, so it reads as a switch and not as a second sign-in. */
.nav .links .btn.lang { padding: 0 14px; font-weight: 600; }
.nav:not(.scrolled) .links .btn.lang { background: rgba(255,255,255,0.08); }
.nav:not(.scrolled) .links .btn.lang:hover { background: rgba(255,255,255,0.2); }
@media (max-width: 800px) {
  .nav .links a:not(.btn) { display: none; }
  .nav .links { gap: 8px; }
  .nav .brand .cube { width: 28px; height: 32px; }
  .nav .brand .wm { width: 51px; height: 25px; }
  .nearcard { padding: 24px; }
}

/* Hero */
@keyframes zoom { 0% { transform: scale(1); } 100% { transform: scale(1.06); } }
.hero {
  position: relative;
  /* The whole first screen (Lorend 10/7: with the stores panel moved down,
     90vh left an empty strip under the hero on a phone). svh = the phone's
     screen with its address bar showing, so nothing hides under it. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 72px;
  overflow: hidden;
  color: #fff;
  background: #1a1020;
}
.hero .bg {
  position: absolute; inset: -5%;
  animation: zoom 25s ease-in-out infinite alternate;
  z-index: 0;
}
.hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.hero .veil {
  position: absolute; inset: 0;
  /* Daytime photo (10/6): a stronger left wash under the headline and lede,
     and a touch more over the sunlit right so the glass panel's white text
     holds — the photo still shows through the panel. */
  background: linear-gradient(135deg, rgba(10,5,15,0.92) 0%, rgba(10,5,15,0.62) 45%, rgba(10,5,15,0.34) 100%);
  z-index: 1;
}
.hero .wrap {
  position: relative; z-index: 2;
  display: flex; gap: 48px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding-top: 40px; padding-bottom: 64px;
}
/* The headline, lede and buttons sit centred in the hero's full first
   screen. (The "Metro by T-Mobile Authorized Dealer · 18 stores" pill that
   used to ride above the headline was removed — Lorend 10/8: "not needed".) */
.hero { align-items: stretch; }
.hero .wrap { align-items: stretch; }
.hero-content { flex: 1; min-width: 320px; display: flex; flex-direction: column; align-items: flex-start; }
.hero-content > h1:first-child { margin-top: auto; }
.hero-content > .ctas { margin-bottom: auto; }
.hero .ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero stores panel (liquid glass, Lorend 10/6: "so it's not blocking the
   background", then "more liquid, but hold the lettering"): "18 stores in …",
   a state / near-me picker, a city or ZIP search and three stores at a time,
   each with Call + Directions. Then (10/6, third pass) "more liquid and
   transparent so you can almost see through them": a 4% white pane, a light
   7px blur with saturate(160%), a thin bright inset edge and a soft top sheen,
   and only a faint dark tint (black 8-12%) for the sunlit daytime photo —
   never a frosted white. The lettering carries itself: white at weight 600+
   with a 0 1px 3px rgba(0,0,0,.45) shadow. A solid pane where backdrop-filter
   is missing. */
.nearcard {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.12)),
    rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(7px) saturate(160%);
  backdrop-filter: blur(7px) saturate(160%);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 18px;
  padding: 28px 32px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nearcard { background: rgba(22, 14, 30, 0.94); }
  .hero .ctas .btn-w, .hero .ctas .btn-o { background: rgba(255,255,255,0.3); }
}
/* "Find a store" and "Pay your bill": the same see-through glass as the panel. */
.hero .ctas .btn-w, .hero .ctas .btn-o {
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.04);
  color: #fff; font-weight: 620;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(7px) saturate(160%);
  backdrop-filter: blur(7px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 24px rgba(0,0,0,0.16);
}
.hero .ctas .btn-w:hover, .hero .ctas .btn-o:hover { background: rgba(255,255,255,0.16); }
.nearcard .k { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 720; color: rgba(255,255,255,0.88); }
.nc-title { font-size: 20px; font-weight: 620; letter-spacing: -0.022em; line-height: 1.25; margin-bottom: 16px; }
.nc-title b { font-weight: 800; }
.nc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.nc-tab {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 99px; background: rgba(255,255,255,0.05); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  font: inherit; font-size: 13px; font-weight: 620; cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.nc-tab b { font-weight: 720; color: rgba(255,255,255,0.85); }
.nc-tab:hover { background: rgba(255,255,255,0.16); }
.nc-tab.active { background: #fff; border-color: #fff; color: var(--ink); text-shadow: none; }
.nc-tab.active b { color: #6b7280; }
.nc-tab.nc-near.active { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.nc-tab svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nc-tab.nc-near.active { background: var(--green); border-color: var(--green); color: #fff; }
.nc-tab.nc-near.is-busy { opacity: 0.6; }
.nc-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.nc-search:focus-within { border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.14); }
.nc-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nc-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 14px; font-weight: 600; color: #fff;
}
.nc-search input::placeholder { color: rgba(255,255,255,0.8); font-weight: 520; }
.nc-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nc-list { display: flex; flex-direction: column; margin-bottom: 14px; border-top: 1px solid rgba(255,255,255,0.16); }
.nc-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
.nc-main { flex: 1 1 150px; min-width: 0; }
.nc-addr { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 720; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hours badge: plain white with a small neutral dot; just the dot turns green
   when the store is open right now (Lorend 10/6: no red behind the hours;
   10/7: no green behind "Open now" either — plain text on the glass). */
.nc-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; font-size: 12px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.92); }
.nc-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.nc-pill.is-open { color: #fff; }
.nc-pill.is-open::before { background: #34d399; }
.nc-pill.is-soon { color: #ffd794; }
.nc-pill.is-soon::before { background: #f59e0b; }
.nc-sub { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.94); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-act { display: flex; gap: 6px; flex: none; }
/* Phones (Lorend 10/7: "the opens is cut out"): the hours never get cut —
   the pill drops under a long street, and the opening / closing time gets
   its own line under the city instead of trailing off in "…". */
@media (max-width: 600px) {
  .nc-addr { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .nc-addr > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nc-sub { white-space: normal; overflow: visible; }
  .nc-dot { display: none; }
  .nc-when { display: block; }
}
/* Call / Directions (Lorend 10/6): glass like the panel — no solid black or
   white. White text, a thin light edge, a brighter fill on hover or tap, and
   44px tall so a thumb lands. Both are the same clear glass (Lorend 10/6:
   "remove the color around Directions" — no magenta tint, no coloured
   border). The panel already blurs the photo behind them, so a 5% fill, a
   thin bright edge and a top sheen are all they need to read as glass. */
.nc-act a {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 14px;
  border-radius: 10px; font-size: 13px; font-weight: 620; white-space: nowrap; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45); transition: background 0.2s, border-color 0.2s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.nc-act .nc-call, .nc-act .nc-dir { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.35); }
.nc-act .nc-call:hover, .nc-act .nc-call:active,
.nc-act .nc-dir:hover, .nc-act .nc-dir:active { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); }
.nc-empty { padding: 16px 0; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(255,255,255,0.16); }
.nc-note { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.9); padding: 8px 0 0; }
/* The open count: plain white text with a neutral dot; the dot turns green
   while at least one store is open (then it reads "11 of 18 open now";
   otherwise the next opening time, never "0 of 18"). No green fill behind
   it (Lorend 10/7). */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 720; padding: 4px 0; letter-spacing: -0.007em; text-transform: none; color: rgba(255,255,255,0.92); }
.live.is-open { color: #fff; }
.live i { width: 6px; height: 6px; border-radius: 50%; display: block; background: rgba(255,255,255,0.5); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(19, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(19, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(19, 185, 129, 0); } }
.live.is-open i { background: #34d399; animation: pulse 2s infinite; }

/* Sections */
.section { padding: 96px 0; }
.section-head { margin-bottom: 64px; max-width: 600px; }
.section-head p { font-size: 20px; color: #4b5563; font-weight: 470; }

/* Services Grid */
.svc-container { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); }
.svc-card { background: #fff; padding: 24px; display: flex; flex-direction: column; transition: background 0.3s; }
.svc-card:hover { background: var(--surface); }
.svc-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; margin-bottom: 20px; border: 1px solid rgba(23, 18, 28, 0.08); background: var(--surface); }
.svc-card h3 { font-size: 17px; font-weight: 720; margin-bottom: 8px; letter-spacing: -0.022em; }
.svc-card p { font-size: 14.5px; color: #4b5563; flex: 1; margin-bottom: 20px; line-height: 1.55; }
.svc-card a { font-size: 14px; font-weight: 620; color: var(--magenta); display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.svc-card a::after { content: "→"; transition: transform 0.2s; }
.svc-card:hover a::after { transform: translateX(4px); }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .svc-card { padding: 12px; }
  .svc-card img { margin-bottom: 12px; }
  .svc-card h3 { font-size: 15px; margin-bottom: 4px; }
  .svc-card p { font-size: 13.5px; margin-bottom: 12px; line-height: 1.4; }
  .svc-card a { font-size: 13px; }
}

/* Store Finder */
.finder-wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.finder-layout {
  display: flex; align-items: flex-start; gap: 0;
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
  background: #fff;
}
.finder-map-pane {
  width: 55%; height: calc(100vh - 120px); max-height: 800px; min-height: 600px;
  position: sticky; top: 88px; background: #f3f4f6;
}
.finder-map-pane::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.06) 120%);
}
/* The stores panel beside the map (Lorend 10/7: moved down from the hero).
   It keeps the hero's liquid glass, so the column carries the same storefront
   photo and veil behind it — white lettering on see-through glass, never a
   frosted white. Desktop: the column is as tall as the map and the store
   list scrolls inside it. */
.finder-list-pane {
  width: 45%; border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; height: calc(100vh - 120px); max-height: 800px; min-height: 600px;
  position: relative; padding: 20px; color: #fff;
  background:
    linear-gradient(135deg, rgba(10,5,15,0.86) 0%, rgba(10,5,15,0.6) 55%, rgba(10,5,15,0.42) 100%),
    url("/static/img/home/storefront-day-800.webp?v=11") center / cover no-repeat, #1a1020;
}
.finder-list-pane .nearcard { max-width: none; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 24px 24px 8px; }
.finder-list-pane .nc-list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 12px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.4) transparent;
}
/* "More stores below" arrow (Lorend 10/8): a small see-through glass circle
   at the foot of the list, like the Team login glass — faint white fill,
   blur and a hairline edge. It bobs gently, fades out (and stops taking
   taps) once the list is at its bottom, and comes back on the way up. The
   list's bottom padding keeps the last row clear of it. */
.finder-list-pane .nearcard { position: relative; }
.finder-list-pane .nc-list { padding-bottom: 52px; }
.nc-more {
  position: absolute; left: 50%; bottom: 14px; z-index: 3;
  width: 34px; height: 34px; margin-left: -17px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 14px rgba(0,0,0,0.18);
  opacity: 1; transition: opacity 0.3s ease, background 0.2s;
  animation: ncBob 2.4s ease-in-out infinite;
}
.nc-more:hover { background: rgba(255,255,255,0.25); }
.nc-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nc-more.is-gone { opacity: 0; pointer-events: none; }
@keyframes ncBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .nc-more { animation: none; } }
.nc-group { padding: 14px 0 6px; font-size: 12px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.86); border-bottom: 1px solid rgba(255,255,255,0.16); }
.nc-group b { font-weight: 720; color: rgba(255,255,255,0.6); margin-left: 4px; }
/* A row is a button for its pin: a light glass lift on hover, a brighter
   pane with a magenta edge once picked (no coloured fill behind the text). */
.nc-row { cursor: pointer; outline: none; margin: 0 -8px; padding: 10px 8px; border-radius: 10px; transition: background 0.2s, box-shadow 0.2s; }
.nc-row:hover, .nc-row.hi-row { background: rgba(255,255,255,0.08); }
.nc-row.is-selected { background: rgba(255,255,255,0.16); box-shadow: inset 3px 0 0 var(--magenta), inset 0 0 0 1px rgba(255,255,255,0.3); }
.nc-row:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.7); }

/* Call / Directions on the map's picked-store card. */
.st-actions { display: flex; gap: 8px; }
.st-actions a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; border-radius: 8px; font-size: 13.5px; font-weight: 620; transition: all 0.2s;
}
.st-actions .btn-call { border: 1px solid var(--hairline); background: transparent; color: var(--ink); }
.st-actions .btn-call:hover { background: var(--surface); border-color: #d1d5db; }
.st-actions .btn-dir { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.st-actions .btn-dir:hover { background: #2a2233; }

/* Map Extras */
.map-legend {
  position: absolute; top: 16px; left: 16px; z-index: 10;
  background: #fff; padding: 8px 14px; border-radius: 99px;
  font-size: 13px; font-weight: 720; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: flex; align-items: center; gap: 6px;
}
.map-legend .dot-open { color: var(--green); }
.map-tooltip {
  position: absolute; z-index: 20; background: var(--ink); color: #fff;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 620;
  pointer-events: none; transform: translate(-50%, -100%); margin-top: -12px; opacity: 0;
  transition: opacity 0.2s, top 0.1s, left 0.1s; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.map-tooltip .is-open { color: var(--green); }
.map-tooltip .is-closed, .map-tooltip .is-soon { color: var(--red); }

/* Map SVG Styling */
.lr-map { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.lr-map path { vector-effect: non-scaling-stroke; }
.lr-map .st-dim { fill: #e5e7eb; stroke: #fff; stroke-width: 1; }
.lr-map .st-on { fill: #d1d5db; stroke: #fff; stroke-width: 1; }
/* Click a state to zoom in (Lorend 10/7): the states with doors are buttons. */
.lr-map .st-pick { cursor: pointer; transition: fill 0.2s; outline: none; }
.lr-map .st-pick:hover, .lr-map .st-pick:focus-visible { fill: #c4c7cf; }
.lr-map.is-zoomed .st-pick { cursor: default; }
.lr-map.is-zoomed .st-pick:hover { fill: #d1d5db; }
.lr-map .st-lbl { font-family: Manrope, sans-serif; font-size: 14px; fill: #6b7280; font-weight: 620; transition: opacity 0.3s; }
.lr-map.is-zoomed .st-lbl { opacity: 0; }
/* Pins keep one screen size at every zoom (the script scales them 1/k); the
   hover grows the body, never the placed group. */
.lr-map .pin { cursor: pointer; outline: none; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.lr-map .pin.shown { opacity: 1; pointer-events: auto; }
.lr-map .pin-body { transition: transform 0.2s; transform-box: fill-box; transform-origin: center; }
.lr-map .pin:hover .pin-body, .lr-map .pin.hi .pin-body, .lr-map .pin.sel .pin-body { transform: scale(1.25); }
.lr-map .pin .halo { fill: var(--magenta); opacity: 0; transition: opacity 0.2s; }
.lr-map .pin.hi .halo, .lr-map .pin.sel .halo, .lr-map .pin:focus-visible .halo { opacity: 0.15; }
.lr-map .pin .ring { fill: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18)); }
.lr-map .pin .dot { fill: var(--magenta); }
.lr-map .pin.is-open .dot { fill: var(--green); }
.lr-map .pin.is-closed .dot { fill: var(--red); }
.lr-map .pin.sel .ring { fill: var(--ink); }
.lr-map .pin.dimmed { opacity: 0.2; pointer-events: none; }
/* Doors too close to tell apart sit on a ring around their real spot, each on a thin leg. */
.lr-map .leg { stroke: #9ca3af; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.3s; }
.lr-map .leg.shown { opacity: 0.8; }
/* Zoomed out: one numbered cluster per state. */
.lr-map .cluster { cursor: pointer; outline: none; transition: opacity 0.3s; }
.lr-map .cluster.hidden { opacity: 0; pointer-events: none; }
.lr-map .cluster .halo { fill: var(--magenta); opacity: 0.12; transition: opacity 0.2s; }
.lr-map .cluster:hover .halo, .lr-map .cluster:focus-visible .halo { opacity: 0.25; }
.lr-map .cluster .ring { fill: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18)); }
.lr-map .cluster .dot { fill: var(--magenta); }
.lr-map .cluster .n { font-family: Manrope, sans-serif; font-size: 15px; font-weight: 760; fill: #fff; pointer-events: none; font-variant-numeric: tabular-nums; }

/* Zoom-out control and the picked store's card, the finder's white glass. */
.map-back {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px 0 8px;
  border-radius: 99px; border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 720; cursor: pointer; transition: background 0.2s;
}
.map-back:hover { background: #fff; }
.map-back[hidden], .map-callout[hidden] { display: none; }
.map-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.map-callout {
  position: absolute; left: 16px; bottom: 16px; z-index: 10; width: min(340px, calc(100% - 32px));
  padding: 14px 16px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12); animation: calloutIn 0.25s ease-out;
}
@keyframes calloutIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.map-callout .mc-x {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 99px; border: none;
  background: transparent; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit;
}
.map-callout .mc-x:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
.map-callout .mc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding-right: 28px; flex-wrap: wrap; }
.map-callout .mc-addr { font-size: 15.5px; font-weight: 720; color: var(--ink); }
.map-callout .mc-city { font-size: 14px; color: #4b5563; margin-bottom: 2px; }
.map-callout .mc-hours { font-size: 13px; color: #6b7280; margin-bottom: 12px; }
.map-callout .st-actions a { height: 40px; }
.map-callout .st-actions .btn-call { background: rgba(255,255,255,0.6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .map-back, .map-callout { background: #fff; }
}
/* The picked store's hours badge: plain text with a small dot, no fill. */
.map-callout .mc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.05em; color: #4b5563; white-space: nowrap; }
.map-callout .mc-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; }
.map-callout .mc-pill.is-open::before { background: var(--green); }
.map-callout .mc-pill.is-soon::before { background: #f59e0b; }

@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .finder-layout { flex-direction: column; height: auto; border: none; background: transparent; }
  .finder-map-pane { width: 100%; height: 420px; min-height: 0; position: relative; top: 0; border-radius: 12px; border: 1px solid var(--hairline); overflow: hidden; margin-bottom: 16px; }
  /* Phones: the panel sits under the map; the store list scrolls inside it
     so the map stays close by. */
  .finder-list-pane { width: 100%; height: auto; min-height: 0; max-height: none; border-left: none; border-radius: 18px; padding: 12px; }
  .finder-list-pane .nc-list { flex: none; max-height: min(64vh, 560px); }
}
@media (max-width: 600px) {
  .finder-list-pane .nearcard { padding: 20px 16px 6px; }
}

/* Careers (Lorend 10/8: "purple on the left and black on the right looks
   split"). One background for the whole section, the same look as the stores
   panel: the storefront photo under a dark plum veil with a soft magenta glow
   spread across it — no box-shaped glow, no flat black half. The words sit on
   a liquid-glass card, and the team photo melts into the background with a
   soft fade instead of a hard edge (left edge on desktop, top on phones). */
.careers {
  position: relative; overflow: hidden; color: #fff; padding: 0;
  background:
    linear-gradient(135deg, rgba(10,5,15,0.9) 0%, rgba(14,7,20,0.78) 55%, rgba(10,5,15,0.7) 100%),
    url("/static/img/home/storefront-day-1280.webp?v=11") center / cover no-repeat, #1a1020;
}
.careers::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 18% 30%, rgba(226,0,116,0.22) 0%, transparent 70%),
    radial-gradient(50% 70% at 70% 85%, rgba(124,58,237,0.14) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.careers-wrap { position: relative; z-index: 1; display: flex; align-items: stretch; max-width: 100%; padding: 0; }
.c-text {
  flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 680px;
  align-self: center; margin: 64px 24px 64px 6vw; padding: 48px 48px 44px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 30%), rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(7px) saturate(160%);
  backdrop-filter: blur(7px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 20px 50px rgba(0,0,0,0.25);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.c-text > :last-child { margin-bottom: 0; }
.c-text h2 { margin-bottom: 16px; }
.c-lede { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 470; margin-bottom: 24px; color: #fff; }
.c-text p { font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 32px; line-height: 1.6; }
.c-text ul { list-style: none; margin-bottom: 40px; }
.c-text li { font-size: 15px; margin-bottom: 16px; padding-left: 28px; position: relative; font-weight: 620; }
.c-text li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e20074' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain;
  border-radius: 0;
}
/* "Join our team" (Lorend 10/7): the same liquid glass as the "18 stores"
   panel and the application sheet, not solid white. White 620 lettering with
   the panel's text shadow keeps it crisp over the dark careers section. */
.c-text .btn-w {
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.04);
  color: #fff; font-weight: 620;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(7px) saturate(160%);
  backdrop-filter: blur(7px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 24px rgba(0,0,0,0.16);
}
.c-text .btn-w:hover { transform: translateY(-2px); background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.6); }
.c-img { flex: 1; min-height: 560px; position: relative; background: transparent; }
.c-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
}
@media (max-width: 900px) {
  .careers-wrap { flex-direction: column-reverse; }
  .c-text { width: auto; max-width: none; margin: -56px 16px 48px; padding: 32px 22px 30px; border-radius: 20px; }
  .c-img { flex: none; width: 100%; height: 380px; min-height: auto; }
  .c-img img {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
}

/* Footer */
.footer { padding: 48px 0; border-top: 1px solid var(--hairline); background: #fff; }
.f-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 24px; }
.f-brand { display: flex; align-items: center; gap: 8px; color: #52178b; }
.f-brand .cube { width: 27px; height: 30px; display: block; }
.f-brand .wm { width: 47px; height: 23px; }
.f-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 13.5px; font-weight: 620; color: #4b5563; }
.f-links a { display: inline-flex; align-items: center; min-height: 28px; }
.f-links a:hover { color: var(--ink); }
.f-copy { font-size: 12.5px; color: #9ca3af; line-height: 1.6; }
@media (max-width: 768px) {
  .f-top { flex-direction: column; align-items: flex-start; }
  .f-links { flex-direction: column; gap: 16px; }
}

/* Fixed Elements */
.fixed-pill {
  /* Sits ABOVE Google's reCAPTCHA badge (bottom-right, 60px tall at
     bottom 14px), never on top of it (Lorend 10/7): 88px clears it with a
     14px gap, plus the phone's home-bar inset. */
  position: fixed; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); right: 24px; z-index: 90;
  color: #fff; padding: 0 20px; height: 44px;
  border-radius: 99px; display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 620;
  transition: transform 0.25s, opacity 0.25s, background 0.2s;
  /* Liquid glass that reads over BOTH the white sections and the dark ones
     while it floats (Lorend 10/7): the panel's sheen, bright edge and text
     shadow, over a smoky ink tint and a heavier blur, so white lettering
     stays crisp on a white page and the glass still shows on a dark one. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 55%),
    rgba(28,18,38,0.66);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 24px rgba(0,0,0,0.22);
}
.fixed-pill:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.02) 55%), rgba(28,18,38,0.74);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fixed-pill { background: rgba(22, 14, 30, 0.92); }
  .c-text .btn-w { background: rgba(255,255,255,0.18); }
}
.fixed-pill.hide { opacity: 0; pointer-events: none; transform: translateY(12px); }
.fixed-label {
  position: fixed; bottom: 24px; left: 24px; z-index: 90;
  font-size: 12px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.05em;
  color: #9ca3af; pointer-events: none;
}
@media (max-width: 600px) { .fixed-label { display: none; } }

/* Motion / Reveal */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Job application sheet (Lorend 10/7: "same liquid as the other boxes we
   worked on"). The sheet sits over the storefront photo with the hero's own
   veil, and the card is the hero panel's glass exactly: a 4% white pane, a
   light 7px blur with saturate(160%), a faint dark tint, a thin bright inset
   edge and a top sheen; white lettering at 600+ with the 0 1px 3px shadow.
   Inputs, Yes/No pills, the select, the résumé picker and every button are
   the same clear glass as Call / Directions: no solid black or white, no
   coloured block behind any text. The sheet scrolls as a whole on a phone. */
.join-overlay { position: fixed; inset: 0; z-index: 200; color: #fff; }
.join-overlay[hidden] { display: none; }
.join-photo {
  position: absolute; inset: 0; z-index: 0;
  background: #1a1020 url(/static/img/home/storefront-day-1280.webp?v=11) center / cover no-repeat;
}
.join-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10,5,15,0.92) 0%, rgba(10,5,15,0.62) 45%, rgba(10,5,15,0.34) 100%);
}
.join-scroll {
  position: absolute; inset: 0; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px;
  padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom));
}
@keyframes joinIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.join-card {
  position: relative; width: 100%; max-width: 520px; margin: auto 0; flex: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.12)),
    rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(7px) saturate(160%);
  backdrop-filter: blur(7px) saturate(160%);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
  animation: joinIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .join-card { background: rgba(22, 14, 30, 0.94); }
}
body.join-open { overflow: hidden; }
.join-card .k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 720; color: rgba(255,255,255,0.88); margin-bottom: 10px; }
.join-card h3 { font-size: 26px; font-weight: 620; letter-spacing: -0.022em; line-height: 1.2; margin: 0 36px 6px 0; outline: none; }
.join-card h3 .join-sep { font-weight: 400; color: rgba(255,255,255,0.6); }
.join-card .hint { font-size: 15px; font-weight: 520; color: rgba(255,255,255,0.88); margin-bottom: 18px; letter-spacing: -0.007em; }
.join-x {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.4); transition: background 0.2s;
}
.join-x:hover { background: rgba(255,255,255,0.18); }
.join-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.join-stack { display: flex; flex-direction: column; gap: 10px; }
.jg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 48px; padding: 0 20px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 620; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 24px rgba(0,0,0,0.16);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.jg-btn:hover, .jg-btn:active { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.6); }
.jg-btn.jg-sm { width: auto; min-height: 44px; padding: 0 14px; font-size: 13px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.jg-btn.jg-go { margin-top: 6px; background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.04) 60%), rgba(255,255,255,0.1); }
.jg-btn.jg-go:hover { background: rgba(255,255,255,0.22); }
.join-back {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 0; cursor: pointer;
  background: none; border: 0; color: #fff; font: inherit; font-size: 14px; font-weight: 620;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.5); text-shadow: inherit;
}
.join-back:hover { opacity: 0.8; }
.join-cities { gap: 0; border-top: 1px solid rgba(255,255,255,0.16); }
.join-city { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
.join-city .nm { font-size: 15px; font-weight: 720; letter-spacing: -0.015em; flex: 1 1 120px; min-width: 0; }
.join-city .row { display: flex; gap: 6px; flex: none; }
.join-fld { display: flex; flex-direction: column; }
.join-lbl { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 700; color: #fff; }
.join-lbl .opt, .resume-label .opt { font-weight: 520; color: rgba(255,255,255,0.78); }
.jg-input {
  display: block; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); outline: none;
  font: inherit; font-size: 16px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  -webkit-appearance: none; appearance: none; transition: background 0.2s, border-color 0.2s;
}
.jg-input::placeholder { color: rgba(255,255,255,0.7); font-weight: 520; }
.jg-input:focus { border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.14); }
.jg-input:-webkit-autofill, .jg-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 9999s ease-out;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 1000px rgba(60,45,75,0.6) inset;
}
.jg-area { min-height: 96px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.jg-select {
  color-scheme: dark; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.jg-select:invalid { color: rgba(255,255,255,0.7); }
.jg-select option { color: #1a1020; background: #fff; text-shadow: none; }
.apply-divider { border-top: 1px solid rgba(255,255,255,0.2); margin-top: 6px; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.apply-divider .qhead { font-size: 15px; font-weight: 720; margin-bottom: 4px; }
.apply-divider .qhead span { font-weight: 520; color: rgba(255,255,255,0.78); }
fieldset.apply-q { display: block; border: 0; margin: 0; padding: 2px 0; min-width: 0; }
fieldset.apply-q::after { content: ''; display: table; clear: both; }
fieldset.apply-q > legend { float: left; margin: 0; padding: 12px 12px 0 0; font-size: 15px; font-weight: 600; max-width: 100%; }
fieldset.apply-q > .apply-yn { float: right; }
.apply-yn { display: flex; gap: 6px; flex-shrink: 0; }
.apply-yn label { position: relative; display: inline-flex; cursor: pointer; }
.apply-yn input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.apply-yn span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 44px; padding: 0 16px;
  border-radius: 99px; font-size: 14px; font-weight: 620; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.4); transition: background 0.2s, border-color 0.2s;
}
.apply-yn label:hover span { background: rgba(255,255,255,0.14); }
.apply-yn input:checked + span { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.apply-yn input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.apply-q-sel { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; }
.apply-q-sel label { font-size: 15px; font-weight: 600; }
.resume-label { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.resume-label input { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 14px; font-weight: 520; color: rgba(255,255,255,0.9); }
.resume-label input::file-selector-button {
  margin-right: 10px; min-height: 40px; padding: 0 14px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 620; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.4);
}
.rc-note { margin-top: 10px; font-size: 12px; font-weight: 520; color: rgba(255,255,255,0.78); text-align: center; }
.join-check { width: 48px; height: 48px; margin-bottom: 10px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }
/* The careers section's "Application received" line is the same glass. */
.c-applied {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(7px) saturate(160%); backdrop-filter: blur(7px) saturate(160%);
}
@media (max-width: 600px) {
  .join-scroll { padding-left: 12px; padding-right: 12px; }
  .join-card { padding: 22px 18px; border-radius: 16px; }
  .join-card h3 { font-size: 22px; }
  .join-x { top: 10px; right: 10px; }
  fieldset.apply-q > legend { padding-top: 10px; }
  .join-city .row { flex: 1 1 100%; }
  .join-city .row .jg-btn { flex: 1; }
}