/* /isp-proxies/: city tables and city cards (16/10/2026). Only the blocks written by
   isp-city-pages-build.mjs (section.isp-cities); everything else on the page keeps its own design.
   Same look as the country cards of isp-country.css (white cards, thin line, violet arrow),
   one teal CTA per screen, motion only transform/opacity and off with prefers-reduced-motion. */

body[data-isp-design] main .isp-cities{--ic-ink:#0E1220;--ic-body:#3A4256;--ic-muted:#5A6377;--ic-line:rgba(14,18,32,.09);--ic-violet:#4B3FD6;
  border-top:0;scroll-margin-top:96px}
body[data-isp-design] main .isp-cities > h2{font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.028em;font-weight:600;text-align:center;
  margin:0 auto;max-width:26ch;color:var(--ic-ink)}
body[data-isp-design] main .isp-cities > .sub{text-align:center;margin:12px auto 0;max-width:66ch;font-size:17px;line-height:1.65;color:var(--ic-body)}
body[data-isp-design] main .isp-cities .isp-city-h3{font-size:20px;line-height:1.3;letter-spacing:-.015em;text-align:center;margin:40px auto 0;color:var(--ic-ink)}
body[data-isp-design] main .isp-cities > .cmp-note{max-width:74ch;margin:12px auto 0;text-align:center;font-size:14px;line-height:1.6;color:var(--ic-muted)}
html body[data-isp-design] main section.isp-cities > p.cmp-note a:not(.btn-cta):not(.btn-outline){color:#3B2FCF;text-decoration:underline;text-underline-offset:3px}
body[data-isp-design] main .isp-cities > .cta-row{display:flex;justify-content:center;margin:24px auto 0}

/* table */
body[data-isp-design] main .isp-city-table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:1040px;margin:30px auto 0;background:#FFFFFF;
  border:1px solid var(--ic-line);border-radius:18px;box-shadow:0 1px 2px rgba(14,18,32,.04),0 14px 38px -22px rgba(14,18,32,.16)}
body[data-isp-design] main .isp-city-table table{width:100%;border-collapse:collapse;text-align:left;font-size:15px;margin:0}
body[data-isp-design] main .isp-city-table :is(th,td){padding:13px 18px;border-bottom:1px solid rgba(14,18,32,.07);vertical-align:top;line-height:1.5;color:var(--ic-body);background:none}
body[data-isp-design] main .isp-city-table thead{background:#F7F6FF}
body[data-isp-design] main .isp-city-table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:#3A4256;white-space:nowrap}
body[data-isp-design] main .isp-city-table tbody tr:last-child > *{border-bottom:0}
body[data-isp-design] main .isp-city-table tbody tr:hover > *{background:#FAFAFE}
body[data-isp-design] main .isp-city-table td:first-child{font-weight:600;color:var(--ic-ink)}
body[data-isp-design] main .isp-city-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
html body[data-isp-design] main section.isp-cities .isp-city-table td a:not(.btn-cta):not(.btn-outline){color:#3B2FCF;text-decoration:underline;text-underline-offset:3px}
body[data-isp-design] main .isp-city-table code{font:500 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#3A4256;background:#F1F2F7;
  border-radius:6px;padding:2px 6px;white-space:nowrap}

/* city cards */
body[data-isp-design] main .isp-city-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1140px;margin:36px auto 0;padding:0;border:0}
body[data-isp-design] main .isp-city-card{display:flex;flex-direction:column;justify-content:center;gap:4px;position:relative;min-height:84px;padding:16px 44px 16px 20px;
  background:#FFFFFF;border:1px solid var(--ic-line);border-radius:18px;box-shadow:0 1px 2px rgba(14,18,32,.03);text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s ease,box-shadow .25s ease}
body[data-isp-design] main .isp-city-card::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-top:2px solid var(--ic-violet);border-right:2px solid var(--ic-violet);transform:rotate(45deg);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
body[data-isp-design] main .isp-city-card:hover{transform:translateY(-3px);border-color:rgba(75,63,214,.4);box-shadow:0 18px 36px -24px rgba(47,43,156,.45)}
body[data-isp-design] main .isp-city-card:hover::after{transform:translateX(3px) rotate(45deg)}
body[data-isp-design] main .isp-city-card:focus-visible{outline:2px solid var(--ic-violet);outline-offset:3px}
body[data-isp-design] main .isp-city-card h3{font-size:16.5px;line-height:1.3;margin:0;color:var(--ic-ink)}
body[data-isp-design] main .isp-city-card p{font-size:14px;line-height:1.45;margin:0;color:var(--ic-muted)}

@media (max-width:1080px){
  body[data-isp-design] main .isp-city-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  body[data-isp-design] main .isp-cities > .sub{font-size:16px}
  body[data-isp-design] main .isp-city-table{border-radius:14px;margin-top:22px}
  body[data-isp-design] main .isp-city-table table{font-size:14px}
  body[data-isp-design] main .isp-city-table :is(th,td){padding:11px 12px}
  body[data-isp-design] main .isp-city-table thead th{white-space:normal;font-size:11px;letter-spacing:.04em}
  body[data-isp-design] main .isp-city-table code{font-size:12px;padding:2px 5px}
  body[data-isp-design] main .isp-city-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-isp-design] main .isp-city-card{padding:14px 30px 14px 14px;min-height:76px}
  body[data-isp-design] main .isp-city-card::after{right:13px}
  body[data-isp-design] main .isp-city-card h3{font-size:15px}
}
@media (max-width:380px){
  body[data-isp-design] main .isp-city-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  body[data-isp-design] main :is(.isp-city-card,.isp-city-card::after){transition:none}
  body[data-isp-design] main .isp-city-card:hover{transform:none}
}

/* "What you get" on city pages: buttons inside the copy column keep the button look */
body[data-isp-design] main #plan .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
body[data-isp-design] main #plan .cta-row a{text-decoration:none}
body[data-isp-design] main #plan .cta-row .btn-cta{color:#04241F}
body[data-isp-design] main #plan .cta-row .btn-outline{color:#0E1220}