/* /isp-proxies/ hub (16/10/2026, isp-hub-build.mjs). Only html.qd-isphub; the rest of the page
   uses isp-country.css + isp-city.css like the country and city pages. Same card language:
   white cards, hairline borders, violet for selection, one teal CTA per screen, no amber text
   (amber on white fails contrast), motion only transform/opacity and off with reduced motion. */

html.qd-isphub body[data-isp-design] main{--ih-ink:#0E1220;--ih-body:#3A4256;--ih-muted:#5A6377;--ih-line:rgba(14,18,32,.09);--ih-line2:rgba(14,18,32,.16);
  --ih-violet:#4B3FD6;--ih-violet-ink:#3B2FCF;--ih-violet-soft:#F1EFFF;--ih-shadow:0 1px 2px rgba(14,18,32,.04),0 16px 40px -24px rgba(14,18,32,.18);
  --ih-ease:cubic-bezier(.2,.7,.2,1)}

/* ── three ways to buy ── */
html.qd-isphub body[data-isp-design] main .ih-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1140px;margin:36px auto 0}
html.qd-isphub body[data-isp-design] main .ih-way{display:flex;flex-direction:column;gap:8px;position:relative;padding:26px 24px 24px;background:#FFFFFF;
  border:1px solid var(--ih-line);border-radius:22px;box-shadow:var(--ih-shadow);transition:transform .25s var(--ih-ease),box-shadow .25s ease}
html.qd-isphub body[data-isp-design] main .ih-way:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(14,18,32,.05),0 28px 60px -30px rgba(47,43,156,.38)}
html.qd-isphub body[data-isp-design] main #way-city{border-color:rgba(75,63,214,.5);box-shadow:inset 0 3px #5546E8,0 0 0 4px rgba(109,92,255,.08),var(--ih-shadow)}
html.qd-isphub body[data-isp-design] main .ih-way-k{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ih-violet-ink)}
html.qd-isphub body[data-isp-design] main .ih-way h3{margin:0;font-size:23px;line-height:1.2;letter-spacing:-.018em;color:var(--ih-ink)}
html.qd-isphub body[data-isp-design] main .ih-way-big{margin:2px 0 4px;font-size:19px;font-weight:600;line-height:1.3;color:var(--ih-ink);font-variant-numeric:tabular-nums}
html.qd-isphub body[data-isp-design] main .ih-way ul{list-style:none;margin:6px 0 14px;padding:14px 0 0;border-top:1px solid var(--ih-line);display:flex;flex-direction:column;gap:11px;flex:1}
html.qd-isphub body[data-isp-design] main .ih-way li{position:relative;padding-left:28px;font-size:16px;line-height:1.5;color:var(--ih-body)}
html.qd-isphub body[data-isp-design] main .ih-way li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--ih-violet-soft)}
html.qd-isphub body[data-isp-design] main .ih-way li::after{content:"";position:absolute;left:6px;top:7px;width:7px;height:4px;border-left:2px solid var(--ih-violet);border-bottom:2px solid var(--ih-violet);transform:rotate(-45deg)}
html.qd-isphub body[data-isp-design] main .ih-way :is(.btn-cta,.btn-outline){align-self:flex-start;text-decoration:none}
html.qd-isphub body[data-isp-design] main .ih-way .btn-outline{color:var(--ih-ink)}
html.qd-isphub body[data-isp-design] main .ih-way .btn-cta{color:#05070F}

/* ── country finder ── */
html.qd-isphub body[data-isp-design] main .ih-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;max-width:1140px;margin:28px auto 0}
html.qd-isphub body[data-isp-design] main .ih-finder:not(.ih-js) .ih-tools{display:none}
html.qd-isphub body[data-isp-design] main .ih-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.qd-isphub body[data-isp-design] main .ih-search input{width:min(360px,calc(100vw - 32px));height:48px;margin:0;padding:0 16px 0 44px;border:1px solid var(--ih-line2);border-radius:14px;
  font:inherit;font-size:16px;color:var(--ih-ink);background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6377' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") no-repeat 14px center/18px;
  box-shadow:0 1px 2px rgba(14,18,32,.04);-webkit-appearance:none;appearance:none}
html.qd-isphub body[data-isp-design] main .ih-search input::placeholder{color:#6B7387}
html.qd-isphub body[data-isp-design] main .ih-search input:focus{outline:2px solid var(--ih-violet);outline-offset:2px;border-color:transparent}
html.qd-isphub body[data-isp-design] main .ih-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
html.qd-isphub body[data-isp-design] main .ih-chips button{min-height:44px;padding:0 16px;border:1px solid var(--ih-line2);border-radius:999px;background:#FFFFFF;color:var(--ih-body);
  font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
html.qd-isphub body[data-isp-design] main .ih-chips button:hover{border-color:rgba(75,63,214,.45)}
html.qd-isphub body[data-isp-design] main .ih-chips button[aria-pressed="true"]{background:var(--ih-ink);border-color:var(--ih-ink);color:#FFFFFF}
html.qd-isphub body[data-isp-design] main .ih-chips button span{opacity:.72;margin-left:4px;font-variant-numeric:tabular-nums}
html.qd-isphub body[data-isp-design] main .ih-countries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:1140px;margin:22px auto 0;color:var(--ih-ink)}
html.qd-isphub body[data-isp-design] main .ih-country{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;row-gap:10px;align-content:start;padding:14px 14px 13px;
  background:#FFFFFF;border:1px solid var(--ih-line);border-radius:16px;text-decoration:none;box-shadow:0 1px 2px rgba(14,18,32,.03);
  transition:transform .25s var(--ih-ease),border-color .2s ease,box-shadow .25s ease}
html.qd-isphub body[data-isp-design] main .ih-country[hidden]{display:none}
html.qd-isphub body[data-isp-design] main .ih-country:hover{transform:translateY(-2px);border-color:rgba(75,63,214,.4);box-shadow:0 18px 36px -24px rgba(47,43,156,.45)}
html.qd-isphub body[data-isp-design] main .ih-country:focus-visible{outline:2px solid var(--ih-violet);outline-offset:3px}
html.qd-isphub body[data-isp-design] main .ih-iso{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ih-violet-soft);color:var(--ih-violet-ink);
  font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}
html.qd-isphub body[data-isp-design] main .ih-cn{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
html.qd-isphub body[data-isp-design] main .ih-cn b{font-size:16px;font-weight:600;line-height:1.3;color:var(--ih-ink)}
html.qd-isphub body[data-isp-design] main .ih-cn small{font-size:14px;line-height:1.35;color:var(--ih-muted);font-variant-numeric:tabular-nums}
html.qd-isphub body[data-isp-design] main .ih-tags{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}
html.qd-isphub body[data-isp-design] main .ih-tags i{font-style:normal;font-size:14px;font-weight:500;line-height:1;padding:5px 9px;border-radius:999px;background:#F3F4F8;color:var(--ih-body)}
html.qd-isphub body[data-isp-design] main .ih-tags i:first-child{background:#E5F8F3;color:#0B5E4D}
html.qd-isphub body[data-isp-design] main .ih-empty{max-width:60ch;margin:22px auto 0;text-align:center;font-size:16px;color:var(--ih-body)}
html.qd-isphub body[data-isp-design] main .ih-empty a{color:var(--ih-violet-ink);text-decoration:underline}

/* ── uses, guides, steps ── */
html.qd-isphub body[data-isp-design] main .ih-use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1140px;margin:32px auto 0}
html.qd-isphub body[data-isp-design] main .ih-use{padding:22px 22px 20px;background:#FFFFFF;border:1px solid var(--ih-line);border-radius:18px;color:var(--ih-body)}
html.qd-isphub body[data-isp-design] main .ih-use h3{margin:0 0 8px;font-size:17.5px;line-height:1.3;color:var(--ih-ink)}
html.qd-isphub body[data-isp-design] main .ih-use p{margin:0;font-size:16px;line-height:1.6;color:var(--ih-body)}
html.qd-isphub body[data-isp-design] main .ih-use a{text-decoration:underline;text-underline-offset:3px}
html.qd-isphub body[data-isp-design] main .ih-guides{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1040px;margin:16px auto 0;color:var(--ih-ink)}
html.qd-isphub body[data-isp-design] main .ih-guides a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--ih-line2);border-radius:999px;background:#FFFFFF;
  font-size:15px;font-weight:500;text-decoration:none;transition:border-color .2s ease,transform .25s var(--ih-ease)}
html.qd-isphub body[data-isp-design] main .ih-guides a:hover{border-color:rgba(75,63,214,.5);transform:translateY(-1px)}
html.qd-isphub body[data-isp-design] main .ih-steps{grid-column:1 / -1;list-style:none;counter-reset:ihs;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0 0;padding:0}
html.qd-isphub body[data-isp-design] main .ih-steps li{counter-increment:ihs;position:relative;padding:20px 20px 20px 66px;background:#FFFFFF;border:1px solid var(--ih-line);border-radius:18px}
html.qd-isphub body[data-isp-design] main .ih-steps li::before{content:counter(ihs);position:absolute;left:20px;top:19px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--ih-violet-soft);color:var(--ih-violet-ink);font-weight:700;font-size:15px}
html.qd-isphub body[data-isp-design] main .ih-steps b{display:block;margin-bottom:6px;font-size:16.5px;color:var(--ih-ink)}
html.qd-isphub body[data-isp-design] main .ih-steps span{display:block;font-size:15.5px;line-height:1.55;color:var(--ih-body)}

/* ── related products under the final band ── */
html.qd-isphub body[data-isp-design] main > .ih-related{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;max-width:1140px;margin:-48px auto 72px;padding:0 16px;
  font-size:15px;color:var(--ih-body)}
html.qd-isphub body[data-isp-design] main > .ih-related a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:1080px){
  html.qd-isphub body[data-isp-design] main .ih-countries{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  html.qd-isphub body[data-isp-design] main .ih-ways{grid-template-columns:1fr;max-width:620px}
  html.qd-isphub body[data-isp-design] main .ih-countries{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.qd-isphub body[data-isp-design] main :is(.ih-use-grid,.ih-steps){grid-template-columns:1fr}
}
@media (max-width:560px){
  html.qd-isphub body[data-isp-design] main .ih-countries{grid-template-columns:1fr;gap:8px}
  html.qd-isphub body[data-isp-design] main .ih-country{grid-template-columns:40px minmax(0,1fr) auto;row-gap:0;padding:12px}
  html.qd-isphub body[data-isp-design] main .ih-tags{grid-column:3;grid-row:1;flex-direction:column;align-items:flex-end;gap:4px}
  html.qd-isphub body[data-isp-design] main .ih-tags i{font-size:13px;padding:4px 8px}
  html.qd-isphub body[data-isp-design] main .ih-way{padding:22px 18px 20px}
  html.qd-isphub body[data-isp-design] main .ih-search input{width:calc(100vw - 32px)}
}
@media (prefers-reduced-motion:reduce){
  html.qd-isphub body[data-isp-design] main :is(.ih-way,.ih-country,.ih-guides a){transition:none}
  html.qd-isphub body[data-isp-design] main :is(.ih-way,.ih-country,.ih-guides a):hover{transform:none}
}

/* phone: the first 12 countries, then "Show all" (search and region chips open the full list) */
html.qd-isphub body[data-isp-design] main .ih-showall{display:none}
@media (max-width:560px){
  html.qd-isphub body[data-isp-design] main .ih-finder.ih-collapsed .ih-country:nth-child(n+13){display:none}
  html.qd-isphub body[data-isp-design] main .ih-finder.ih-collapsed .ih-showall:not([hidden]){display:flex;justify-content:center;align-items:center;width:100%;min-height:48px;margin:12px 0 0;
    border:1px solid var(--ih-line2);border-radius:14px;background:#FFFFFF;color:var(--ih-ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
}
/* sources: same pills as the guides, a little smaller */
html.qd-isphub body[data-isp-design] main .ih-sources .ih-guides a{font-size:14.5px;text-decoration:underline;text-underline-offset:3px}