/* =====================================================================
   WHERE WE ARE  (where-we-are.html) - desktop layout, black and green
   The India map itself is js/india-map.js; its styles are below the page's.
   ===================================================================== */

.wt-page {
  --c-surface: #0c0c0f; --c-card: #111114; --c-card-2: #16161a;
  --c-line: rgba(255, 255, 255, 0.08); --c-line-2: rgba(255, 255, 255, 0.14);
  --c-text: #f5f5f5; --c-muted: #9a9aa3; --c-faint: #5d5d66;
  --c-green: #16a34a; --c-green-2: #22c55e; --c-green-soft: rgba(34, 197, 94, 0.12);
  --c-violet: #9486ff; --c-violet-soft: rgba(148, 134, 255, 0.14);
  --f-head: Sora, Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --r-md: 16px; --r-pill: 999px;
  color: var(--c-text); font-family: var(--f-body);
}
body[data-page="where"] { background: #050505; }

.wt-wrap { width: min(1184px, 93.334%); margin: 0 auto; padding: 56px 0 80px; }

.wt-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: 26px; }
.wt-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-green-2); }
.wt-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.7; }
.wt-head h1 { margin: 12px 0 0; font: 300 40px/1.12 var(--f-head); letter-spacing: -0.035em; }
.wt-head h1 em { font-style: normal; font-weight: 700; color: var(--c-green-2); }
.wt-head p { margin: 0 0 6px; color: var(--c-muted); font-size: 14.5px; max-width: 340px; text-align: right; }

.wt-card { border-radius: 24px; background: linear-gradient(180deg, #101013, #0b0b0e); border: 1px solid var(--c-line); box-shadow: 0 30px 80px -40px rgba(34, 197, 94, 0.18); }
.wt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--c-green-2); color: #04160b; font: 700 14.5px var(--f-body); cursor: pointer; text-decoration: none; transition: filter 0.15s; }
.wt-btn:hover { filter: brightness(1.08); }
.wt-btn--ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-line-2); }

.wt-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 22px 26px; border-radius: 20px; background: var(--c-green-soft); border: 1px solid rgba(34, 197, 94, 0.28); }
.wt-cta h3 { margin: 0; font: 300 22px var(--f-head); letter-spacing: -0.02em; }
.wt-cta h3 em { font-style: normal; font-weight: 700; color: var(--c-green-2); }
.wt-cta p { margin: 4px 0 0; color: var(--c-muted); font-size: 13.5px; }
.wt-cta div:last-child { display: flex; gap: 10px; flex: none; }

.wt-load { padding: 120px 0; text-align: center; color: var(--c-muted); }

/* ---------- the map ---------- */

.im { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); overflow: hidden; }
.im-map { position: relative; border-right: 1px solid var(--c-line); }
.im-map svg { display: block; width: 100%; height: auto; max-height: 620px; touch-action: manipulation; }
.im-back {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(16, 16, 20, 0.88); border: 1px solid var(--c-line-2); color: var(--c-text);
  font: 500 13px var(--f-body); cursor: pointer; backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: 0.25s;
}
.im-back.is-show { opacity: 1; transform: none; pointer-events: auto; }
.im-legend { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 14px; font-size: 11.5px; color: var(--c-muted); }
.im-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.im-tip {
  position: absolute; z-index: 3; pointer-events: none; padding: 8px 12px; border-radius: 12px;
  background: rgba(16, 16, 20, 0.96); border: 1px solid rgba(34, 197, 94, 0.5); font-size: 12.5px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, calc(-100% - 10px)); transition: opacity 0.15s;
}
.im-tip small { display: block; color: var(--c-muted); font-size: 11px; }

.im-land { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.16); stroke-linejoin: round; }
.im-dot { fill: rgba(255, 255, 255, 0.12); transition: opacity 0.6s; }
.im-dot.is-hot { fill: var(--c-green-2); }
.im-dot.is-tw { fill: var(--c-violet); opacity: 0; animation: im-tw 3.4s ease-in-out infinite; }
@keyframes im-tw { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 0.95; } }
.im-map.is-reveal .im-dot:not(.is-tw) { opacity: 0; }
.im-dots, .im-cities, .im-arcs, .im-bubbles { transition: opacity 0.45s; }
.im-arc { fill: none; stroke: var(--c-green-2); stroke-opacity: 0.35; stroke-dasharray: 2 6; stroke-linecap: round; animation: im-flow 1.6s linear infinite; }
@keyframes im-flow { to { stroke-dashoffset: -16; } }
.im-pulse { fill: none; stroke: var(--c-green-2); transform-box: fill-box; transform-origin: center; animation: im-pl 2.8s ease-out infinite; }
.im-pulse.is-b { animation-delay: 1.4s; }
@keyframes im-pl { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(3); opacity: 0; } }
.im-core { fill: var(--c-green-2); stroke: var(--c-surface); }
.im-hit { fill: transparent; cursor: pointer; }
.im-cities g { cursor: pointer; outline: none; }
.im-cities g:focus-visible .im-core { stroke: #fff; }
.im-clabel { font-family: var(--f-body); font-weight: 600; fill: var(--c-text); pointer-events: none; }
.im-clabel .s { font-weight: 500; fill: var(--c-muted); }

.im-map:not(.is-city) .im-bubbles { opacity: 0; pointer-events: none; }
.im-map.is-city .im-cities, .im-map.is-city .im-arcs, .im-map.is-city .im-dots { opacity: 0; pointer-events: none; }
.im-cdot { fill: rgba(255, 255, 255, 0.12); }
.im-bub { fill: rgba(34, 197, 94, 0.2); stroke: var(--c-green-2); cursor: pointer; transform-box: fill-box; transform-origin: center; transition: fill 0.2s; }
.im-bub.is-ncr { fill: rgba(148, 134, 255, 0.18); stroke: var(--c-violet); }
.im-bub:hover, .im-bub.is-on { fill: rgba(34, 197, 94, 0.55); }
.im-bub.is-ncr:hover, .im-bub.is-ncr.is-on { fill: rgba(148, 134, 255, 0.5); }
.im-bub.is-found { animation: im-found 1.2s ease-in-out 3; }
@keyframes im-found { 50% { transform: scale(1.35); } }
.im-bubbles.is-pop .im-bub { animation: im-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }
@keyframes im-pop { from { transform: scale(0); } to { transform: scale(1); } }
.im-blabel { font-family: var(--f-body); font-weight: 500; fill: var(--c-text); opacity: 0.85; pointer-events: none; paint-order: stroke; stroke: var(--c-surface); stroke-linejoin: round; }

.im-panel { padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.im-pin { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: var(--c-card-2); border: 1px solid var(--c-line-2); }
.im-pin:focus-within { border-color: var(--c-green-2); box-shadow: 0 0 0 4px var(--c-green-soft); }
.im-pin input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--c-text); font: 500 16px var(--f-body); padding: 8px 14px; }
.im-pin input::placeholder { color: var(--c-faint); }
.im-res { padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; color: var(--c-muted); }
.im-res b { display: block; color: var(--c-text); font-size: 14px; margin-bottom: 2px; }
.im-res a { color: inherit; font-weight: 600; }
.im-res.is-yes { background: var(--c-green-soft); border: 1px solid rgba(34, 197, 94, 0.4); }
.im-res.is-online { background: var(--c-violet-soft); border: 1px solid rgba(148, 134, 255, 0.4); }
.im-view h3 { margin: 0 0 12px; font: 300 24px/1.15 var(--f-head); letter-spacing: -0.03em; }
.im-view h3 em { font-style: normal; font-weight: 700; color: var(--c-green-2); }
.im-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin-bottom: 12px; }
.im-stats div { padding: 12px 4px; }
.im-stats div + div { border-left: 1px solid var(--c-line); padding-left: 12px; }
.im-stats b { display: block; font: 600 22px var(--f-head); letter-spacing: -0.04em; }
.im-stats span { font-size: 12px; color: var(--c-muted); }
.im-blurb { margin: 0 0 8px; color: var(--c-muted); font-size: 13.5px; }
.im-cl-list { display: grid; gap: 8px; }
.im-cl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-card-2); border: 1px solid var(--c-line); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s; }
.im-cl:hover { border-color: rgba(34, 197, 94, 0.55); }
.im-cl i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-green-2); box-shadow: 0 0 0 4px var(--c-green-soft); }
.im-cl b { display: block; font-size: 14.5px; }
.im-cl small { display: block; color: var(--c-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-cl em { font-style: normal; font-size: 11.5px; color: var(--c-green-2); padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-green-soft); white-space: nowrap; }
.im-cl.is-online { cursor: default; }
.im-cl.is-online:hover { border-color: var(--c-line); }
.im-cl.is-online i { background: var(--c-violet); box-shadow: 0 0 0 4px var(--c-violet-soft); }
.im-cl.is-online em { color: var(--c-violet); background: var(--c-violet-soft); }
.im-areas { max-height: 300px; overflow: auto; padding-right: 4px; scrollbar-width: thin; }
.im-ar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 9px 2px; border-bottom: 1px solid var(--c-line); font-size: 13.5px; cursor: pointer; }
.im-ar small { color: var(--c-muted); font-size: 11.5px; }
.im-ar:hover, .im-ar.is-on { color: var(--c-green-2); }
.im-track { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--c-line); overflow: hidden; }
.im-track i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--c-green), var(--c-green-2)); transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.im-ar.is-ncr .im-track i { background: linear-gradient(90deg, #6d5dfc, var(--c-violet)); }


@media (prefers-reduced-motion: reduce) {
  .im *, .im *::before { animation: none !important; transition: none !important; }
}

/* the map card on the page: map left, panel right */
.wt-page .im { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.wt-page .im-map svg { max-height: 660px; }
.wt-page .im-panel { padding: 26px 26px 24px; }
.wt-page .im-pin .wt-btn { min-height: 40px; }
.wt-page .im-view h3 { font-size: 26px; }
.wt-page .im-areas { max-height: 380px; }
.wt-head h1 { font-size: 36px; white-space: nowrap; }
.wt-head p { white-space: nowrap; max-width: none; }
.wt-page .im-cl { box-sizing: border-box; }
.wt-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
.wt-head p { margin: 10px 0 0; text-align: left; }

/* ---------- light mode ---------- */
html[data-theme="light"] body[data-page="where"] { background: #f6f7f9; }
html[data-theme="light"] .wt-page {
  --c-surface: #ffffff; --c-card: #ffffff; --c-card-2: #f3f4f6;
  --c-line: rgba(0, 0, 0, 0.08); --c-line-2: rgba(0, 0, 0, 0.13);
  --c-text: #111418; --c-muted: #5b6472; --c-faint: #9aa0a8;
  --c-green: #16a34a; --c-green-2: #16a34a; --c-green-soft: rgba(22, 163, 74, 0.10);
  --c-violet: #7c6cf0; --c-violet-soft: rgba(124, 108, 240, 0.12);
}
html[data-theme="light"] .wt-card { background: #ffffff; box-shadow: 0 30px 70px -45px rgba(0, 0, 0, 0.25); }
html[data-theme="light"] .wt-btn { color: #ffffff; }
html[data-theme="light"] .wt-btn--ghost { color: #111418; }
html[data-theme="light"] .wt-cta { border-color: rgba(22, 163, 74, 0.28); }
html[data-theme="light"] .im-land { fill: rgba(22, 163, 74, 0.04); stroke: rgba(0, 0, 0, 0.18); }
html[data-theme="light"] .im-dot, html[data-theme="light"] .im-cdot { fill: rgba(0, 0, 0, 0.13); }
html[data-theme="light"] .im-dot.is-hot { fill: #16a34a; }
html[data-theme="light"] .im-back, html[data-theme="light"] .im-tip { background: rgba(255, 255, 255, 0.95); }
html[data-theme="light"] .im-bub { fill: rgba(22, 163, 74, 0.16); }
html[data-theme="light"] .im-bub:hover, html[data-theme="light"] .im-bub.is-on { fill: rgba(22, 163, 74, 0.45); }

/* ---------- PIN answer, city pills, no borders ---------- */
.wt-page .im-pin .wt-btn { min-width: 86px; transition: background 0.25s ease, color 0.25s ease, filter 0.15s; }
.wt-page .im-pin .wt-btn.is-yes { font-size: 20px; }
.wt-page .im-pin .wt-btn.is-no { background: #f59e0b; color: #1f1300; font-size: 22px; }
.wt-page .im-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(4, 22, 11, 0.25); border-top-color: #04160b; animation: imSpin 0.7s linear infinite; }
@keyframes imSpin { to { transform: rotate(360deg); } }

/* the answer: a soft pill without a border */
.wt-page .im-res { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; border: 0; border-radius: 999px; animation: imPop 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
.wt-page .im-res b { margin: 0; font-size: 15px; }
.wt-page .im-res small { font-size: 12.5px; }
.wt-page .im-res.is-yes { background: rgba(34, 197, 94, 0.16); border: 0; }
.wt-page .im-res.is-yes b { color: #4ade80; }
.wt-page .im-res.is-online { background: rgba(245, 158, 11, 0.16); border: 0; }
.wt-page .im-res.is-online b { color: #fbbf24; }
.wt-page .im-res a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@keyframes imPop { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }
html[data-theme="light"] .wt-page .im-res.is-yes b { color: #15803d; }
html[data-theme="light"] .wt-page .im-res.is-online b { color: #b45309; }

/* the cities and Online: rounded pills, no border, a soft fill that brightens on hover */
.wt-page .im-cl { border: 0; border-radius: 999px; padding: 12px 18px; background: rgba(255, 255, 255, 0.045); transition: background 0.2s ease, transform 0.2s ease; }
.wt-page .im-cl:hover { border: 0; background: rgba(34, 197, 94, 0.12); transform: translateX(2px); }
.wt-page .im-cl.is-online:hover { background: rgba(148, 134, 255, 0.10); transform: none; }
html[data-theme="light"] .wt-page .im-cl { background: #f1f3f5; }
html[data-theme="light"] .wt-page .im-cl:hover { background: rgba(22, 163, 74, 0.10); }

/* the stats line and the "Need a tutor?" band without hard borders */
.wt-page .wt-cta { border: 0; background: linear-gradient(100deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06)); }
html[data-theme="light"] .wt-page .wt-cta { background: linear-gradient(100deg, rgba(22, 163, 74, 0.14), rgba(22, 163, 74, 0.04)); }

/* ---------- the map: livelier ---------- */
/* the busy dots round the three cities breathe; the dotted routes run and glow */
.im-dot.is-hot { animation: imBreath 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.im-dot.is-hot:nth-child(3n) { animation-delay: 0.8s; }
.im-dot.is-hot:nth-child(3n+1) { animation-delay: 1.6s; }
@keyframes imBreath { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.im-arc { stroke-opacity: 0.6; filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.6)); }
.im-core { filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.9)); }
.im-comet { fill: #bbf7d0; filter: drop-shadow(0 0 5px #22c55e); }
.im-map.is-city .im-comet { opacity: 0; }

/* ---------- heading in the middle, just under the header ---------- */
.wt-wrap { padding-top: 30px; }
.wt-head { display: block; text-align: center; margin-bottom: 22px; }
.wt-head h1 { margin: 0; }
.wt-head p { margin: 8px 0 0; text-align: center; }

/* ---------- the Check button keeps its pill shape: a spinner, a ticked circle or a crossed one inside it ---------- */
.wt-page .im-pin .wt-btn { width: 92px; min-width: 92px; height: 40px; padding: 0; flex: none; }
.wt-page .im-pin .wt-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: imPop 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.wt-page .im-pin .wt-btn.is-yes { background: var(--c-green-2); color: #04160b; font-size: inherit; }
.wt-page .im-pin .wt-btn.is-no { background: #f59e0b; color: #1f1300; font-size: inherit; }
.wt-page .im-pin .wt-btn.is-busy { cursor: progress; }

/* ---------- the answer: one centred line in a soft pill ---------- */
.wt-page .im-res { flex-direction: row; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 12px 20px; font-size: 14px; color: var(--c-text); }
.wt-page .im-res b { display: inline; font-size: 14px; }
.wt-page .im-res.is-yes b { color: #4ade80; }
.wt-page .im-res.is-online { color: #fcd34d; }
.wt-page .im-res.is-online b { color: #fbbf24; }
.wt-page .im-res > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #f59e0b; stroke-width: 2; stroke-linecap: round; }
html[data-theme="light"] .wt-page .im-res.is-online { color: #92400e; }

/* the three figures: each in the middle of its own box */
.wt-page .im-stats div { text-align: center; padding-left: 4px; padding-right: 4px; }
.wt-page .im-stats div + div { padding-left: 4px; }

/* every city we teach in at home (js/data/cities.js): a small dot on the map - hidden while a city is open */
.im-town { fill: #86efac; stroke: rgba(34, 197, 94, 0.35); stroke-width: 4; }
html[data-theme="light"] .im-town { fill: #16a34a; stroke: rgba(22, 163, 74, 0.25); }
.im-towns { transition: opacity 0.45s; }
.im-map.is-city .im-towns { opacity: 0; pointer-events: none; }
.wt-contact { margin-top: 28px; }

/* Need a tutor? - under the call / message card: an icon, the words, the two buttons (no border) */
.wt-contact + .wt-cta { margin-top: 18px; }
.wt-cta { gap: 22px; padding: 24px 30px; border: 0; border-radius: 26px;
  background: radial-gradient(60% 140% at 100% 50%, rgba(34, 197, 94, 0.22), transparent 70%), linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04)); }
.wt-cta-ic { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--c-green-2); color: #04160b; box-shadow: 0 12px 28px -12px rgba(34, 197, 94, 0.9); }
.wt-cta-ic svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wt-cta-text { flex: 1; min-width: 0; }
.wt-cta h3 { font-size: 26px; }
.wt-cta p { font-size: 14.5px; }
.wt-cta .wt-cta-btns { display: flex; gap: 10px; flex: none; }
.wt-cta .wt-btn { min-height: 46px; padding: 0 22px; }
.wt-cta .wt-btn--ghost { border: 0; background: rgba(255, 255, 255, 0.07); }
html[data-theme="light"] .wt-cta .wt-btn--ghost { background: #ffffff; }


/* the cities without their own map area yet (js/data/cities.js): one row, the names wrap */
.im-cl.is-more { cursor: default; }
.im-cl.is-more:hover { border-color: var(--c-line); }
.im-cl.is-more small { white-space: normal; line-height: 1.5; }

/* lighter on the computer: the routes, the comets and the centres without the glow filter (it was redrawn on
   every frame), and nothing moves while the map is off the screen (js/india-map.js) */
.im-arc, .im-core, .im-comet { filter: none; }
.im-map.is-paused * { animation-play-state: paused !important; }
/* a tap on a city's name (or its figures) opens it too, not only its dot */
.im-map:not(.is-city) .im-cities .im-clabel { pointer-events: bounding-box; }
.im-cities > g { cursor: pointer; }

/* =====================================================================
   PHONES (the page opens at the phone's own width - where-we-are.html): one column, bit by bit -
   the heading on two lines, the map in its own card, the PIN box, the figures in a card, then each city as a
   card of its own (an icon, the name and its localities, the count, an arrow), the call card and Need a tutor?
   The header, the bottom menu and the footer are js/header.js and css/header.css / footer.css.
   ===================================================================== */
@media (max-width: 760px) {
  .wt-wrap { width: auto; padding: 18px 16px 28px; }

  /* the heading: big, on two lines, from the left */
  .wt-head { text-align: left; margin-bottom: 16px; }
  .wt-head h1 { font-size: 31px; line-height: 1.12; white-space: normal; letter-spacing: -0.03em; }
  .wt-head h1 em { white-space: nowrap; }
  .wt-head p { margin-top: 8px; font-size: 14px; line-height: 1.45; white-space: normal; text-align: left; }

  /* the map card and the panel under it, each piece standing on its own */
  .wt-page .im, .wt-page .wt-card.im { display: flex; flex-direction: column; gap: 12px; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .wt-page .im-map { border: 1px solid var(--c-line); border-right: 1px solid var(--c-line); border-radius: 22px; overflow: hidden;
    background: linear-gradient(180deg, #101013, #0b0b0e); box-shadow: 0 24px 60px -36px rgba(34, 197, 94, 0.35); }
  .wt-page .im-map svg { max-height: 380px; margin: 0 auto; }
  .wt-page .im-legend { left: auto; right: 12px; bottom: 10px; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; }
  /* the cities' names on the map readable on a phone (their figures are in the list below) */
  .wt-page .im-map:not(.is-city) .im-clabel { font-size: 22px; }
  .wt-page .im-map:not(.is-city) .im-clabel .s { display: none; }
  .wt-page .im-back { left: 10px; top: 10px; padding: 7px 12px; font-size: 12.5px; }
  .wt-page .im-panel { padding: 0; gap: 12px; }

  /* the PIN box: a full-width pill, the Check button inside it */
  .wt-page .im-pin { padding: 4px 4px 4px 6px; background: var(--c-card); }
  .wt-page .im-pin::before { content: ""; flex: none; align-self: center; width: 20px; height: 20px; margin-left: 10px; background: var(--c-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11a7 7 0 1 1 14 0c0 4.9-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11a7 7 0 1 1 14 0c0 4.9-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  .wt-page .im-pin input { font-size: 16px; padding: 10px 8px 10px 10px; text-overflow: ellipsis; }
  .wt-page .im-pin input::placeholder { font-size: 14.5px; }
  .wt-page .im-pin .wt-btn { width: 86px; min-width: 86px; height: 44px; font-size: 15px; }
  .wt-page .im-res { border-radius: 16px; padding: 11px 14px; font-size: 13.5px; flex-wrap: wrap; }

  /* Verified tutors, near you + the three figures: one card */
  .wt-page .im-view h3 { margin: 0; padding: 16px 16px 6px; font-size: 22px; border-radius: 20px 20px 0 0; background: var(--c-card); border: 1px solid var(--c-line); border-bottom: 0; }
  .wt-page .im-stats { margin: 0 0 12px; border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 20px 20px; background: var(--c-card); padding: 4px 6px 12px; }
  .wt-page .im-stats div { padding: 6px 4px; }
  .wt-page .im-stats div + div { border-left: 1px solid var(--c-line); }
  .wt-page .im-stats b { font-size: 22px; }
  .wt-page .im-stats span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; }
  .wt-page .im-blurb { font-size: 13px; }

  /* each city: a card - icon, name and localities, the count, an arrow */
  .wt-page .im-cl-list { gap: 8px; }
  .wt-page .im-cl { grid-template-columns: 36px minmax(0, 1fr) auto 12px; gap: 12px; padding: 12px 12px 12px 12px; border-radius: 18px; background: var(--c-card); border: 1px solid var(--c-line); }
  .wt-page .im-cl:hover { transform: none; }
  .wt-page .im-cl > i { width: 36px; height: 36px; border-radius: 50%; box-shadow: none; background: var(--c-green-soft); position: relative; }
  .wt-page .im-cl > i::before { content: ""; position: absolute; inset: 9px; background: var(--c-green-2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .wt-page .im-cl.is-more > i::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E"); }
  .wt-page .im-cl.is-online > i { background: var(--c-violet-soft); }
  .wt-page .im-cl.is-online > i::before { background: var(--c-violet);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
  /* the name on one line (made a little smaller when it needs it, else cut with "..."), the localities on one
     line - when they do not fit they slide along (where-we-are.html) */
  .wt-page .im-cl { align-items: center; }
  .wt-page .im-cl > div { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .wt-page .im-cl b { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wt-page .im-cl small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .wt-page .im-cl small.is-run { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); }
  .wt-page .im-cl small .wt-run { display: inline-flex; gap: 32px; padding-left: 8px; animation: wtRun var(--dur, 12s) linear infinite; will-change: transform; }
  @keyframes wtRun { to { transform: translateX(calc(-50% - 16px)); } }
  .wt-page .im-cl em { font-size: 11px; padding: 4px 8px; }
  .wt-page .im-cl::after { content: ""; width: 9px; height: 9px; border: solid var(--c-muted); border-width: 2px 2px 0 0; transform: rotate(45deg); justify-self: start; }
  .wt-page .im-cl.is-more::after, .wt-page .im-cl.is-online::after { opacity: 0.35; }

  /* a city opened on the map: its localities in a card */
  .wt-page .im-areas { max-height: 340px; padding: 4px 14px; border-radius: 18px; background: var(--c-card); border: 1px solid var(--c-line); }
  .wt-page .im-areas .im-ar:last-child { border-bottom: 0; }
  .wt-page .im-blurb { margin: 0 2px 10px; line-height: 1.45; }

  /* the call card (js/contact-card.js) and Need a tutor? */
  .wt-contact { margin-top: 18px; }
  .wt-contact + .wt-cta { margin-top: 14px; }
  .wt-cta { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 12px; align-items: center; padding: 16px; border-radius: 20px; }
  .wt-cta-ic { width: 44px; height: 44px; }
  .wt-cta-ic svg { width: 21px; height: 21px; }
  .wt-cta h3 { font-size: 19px; }
  .wt-cta p { font-size: 12.5px; line-height: 1.4; }
  .wt-cta div.wt-cta-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wt-cta .wt-btn { min-height: 44px; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 760px) {
  html[data-theme="light"] .wt-page .im-map { background: #ffffff; box-shadow: 0 24px 60px -40px rgba(15, 23, 42, 0.3); }
  html[data-theme="light"] .wt-page .im-view h3, html[data-theme="light"] .wt-page .im-stats, html[data-theme="light"] .wt-page .im-cl,
  html[data-theme="light"] .wt-page .im-pin, html[data-theme="light"] .wt-page .im-areas { background: #ffffff; }
}