/* ZGO 1.6.0 — static pages (FAQs, install, policies, contact). Mobile-first. */
.zstatic { background: var(--z-g50, #f8fafc); font-family: var(--z-font); color: var(--z-ink, #080c1c); padding: 20px 0 64px; margin-top: 0 !important; }
.zstatic .wp-block-post-content, .zstatic .entry-content { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.zstatic .wp-block-post-content > * { max-width: none !important; }
.zst { width: 100%; }
.zst *, .zst *::before, .zst *::after { box-sizing: border-box; }
.zst-wrap { width: 100%; max-width: calc(var(--z-max, 1040px) + 2 * var(--z-gutter, 20px)); margin: 0 auto; padding: 0 var(--z-gutter, 20px); }

/* crumbs (same as shop) */
.zst .zs-crumbs { margin: 0 0 6px; }
.zst .zs-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--z-g500, #6b728a); }
.zst .zs-crumbs li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.zst .zs-crumbs li:not(:last-child)::after { content: "/"; margin: 0 6px; color: var(--z-g300, #cbd2e0); font-weight: 500; }
.zst .zs-crumbs a { color: var(--z-g600, #475569) !important; text-decoration: none !important; font-weight: 650; min-height: 44px; display: inline-flex; align-items: center; }
.zst .zs-crumbs a:hover { color: var(--z-pink, #ff2d78) !important; }
.zst .zs-crumbs [aria-current="page"] { color: var(--z-ink, #080c1c); font-weight: 700; }
@media (min-width: 768px) { .zst .zs-crumbs ol { font-size: 16px; } }

/* head */
.zst-head { max-width: 760px; margin: 0 0 22px; }
.zst-title { margin: 0 0 8px !important; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem) !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -.025em; color: var(--z-ink, #080c1c); }
.zst-sub { margin: 0 !important; font-size: 16px; line-height: 1.55; color: var(--z-g600, #475569); }
.zst-updated { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0 !important; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--z-g200, #e2e5ee); font-size: 13px; font-weight: 700; color: var(--z-g600, #475569); }
.zst-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--z-teal, #00c9a7); }

/* article typography */
.zst-article { max-width: 760px; min-width: 0; }
.zst-article p, .zst-article li { font-size: 16px; line-height: 1.7; color: #2a3045; }
.zst-article p { margin: 0 0 12px; }
.zst-article p:last-child { margin-bottom: 0; }
.zst-article ul, .zst-article ol { margin: 0 0 12px; padding-left: 1.25em; }
.zst-article li { margin: 0 0 6px; }
.zst-article li::marker { color: var(--z-pink, #ff2d78); font-weight: 800; }
.zst-article strong { color: var(--z-ink, #080c1c); font-weight: 700; }
.zst-article a { color: var(--z-pink, #ff2d78) !important; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; background: none !important; padding: 0 !important; border-radius: 0 !important; }
.zst-article a:hover { color: #e61e66 !important; }
.zst-article code { font-size: .9em; padding: 2px 6px; border-radius: 6px; background: #fff7cc; border: 1px solid #ffe680; color: var(--z-ink, #080c1c); }
.zst-intro { background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); padding: 18px 20px; margin-bottom: 16px; }

/* policy sections */
.zst-sec { background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); padding: 20px; margin: 0 0 12px; scroll-margin-top: 96px; }
.zst-sec h2, .zst-card h2 { margin: 0 0 10px !important; font-size: 19px !important; line-height: 1.3 !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--z-ink, #080c1c); }
.zst-sec h3 { margin: 16px 0 8px !important; font-size: 16px !important; font-weight: 800 !important; }
@media (min-width: 768px) { .zst-sec { padding: 24px 28px; } .zst-sec h2 { font-size: 21px !important; } }

/* TOC */
.zst-toc { margin: 0 0 16px; }
.zst-toc__box { background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); padding: 0; }
.zst-toc__box summary { cursor: pointer; list-style: none; padding: 14px 18px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--z-g600, #475569); display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.zst-toc__box summary::-webkit-details-marker { display: none; }
.zst-toc__box summary::after { content: "+"; font-size: 20px; color: var(--z-pink, #ff2d78); }
.zst-toc__box[open] summary::after { content: "–"; }
.zst-toc ol { list-style: none; margin: 0; padding: 0 10px 12px; counter-reset: none; }
.zst-toc li { margin: 0; }
.zst-toc a { display: block; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--z-ink, #080c1c) !important; text-decoration: none !important; }
.zst-toc a:hover { background: #fff0f5; color: var(--z-pink, #ff2d78) !important; }
@media (min-width: 1024px) {
  .zst-grid { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 32px; align-items: start; }
  .zst-toc { position: sticky; top: 96px; margin: 0; }
  .zst-toc__box summary { pointer-events: none; }
  .zst-toc__box summary::after { content: none; }
}

/* FAQ accordion */
.zst-faq { display: grid; gap: 10px; }
.zst-faq__item { background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.zst-faq__item[open] { border-color: rgba(255,45,120,.35); box-shadow: 0 10px 24px -14px rgba(8,12,28,.18); }
.zst-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 18px; font-size: 16.5px; font-weight: 750; line-height: 1.35; color: var(--z-ink, #080c1c); }
.zst-faq__q::-webkit-details-marker { display: none; }
.zst-faq__q:hover { color: var(--z-pink, #ff2d78); }
.zst-faq__icon { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: #fff0f5; }
.zst-faq__icon::before, .zst-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--z-pink, #ff2d78); border-radius: 2px; transition: transform .2s; }
.zst-faq__icon::after { transform: rotate(90deg); }
.zst-faq__item[open] .zst-faq__icon { background: var(--z-pink, #ff2d78); }
.zst-faq__item[open] .zst-faq__icon::before, .zst-faq__item[open] .zst-faq__icon::after { background: #fff; }
.zst-faq__item[open] .zst-faq__icon::after { transform: rotate(0deg); }
.zst-faq__a { padding: 0 18px 18px; }

/* 1.8.6 — remove expand hairline under FAQ title (EN + ZH /zh/faqs/)
   Open <details> can show a 1px page-bg seam or UA border under <summary> on some WebKit/mobile browsers.
   Do NOT set display:flex/grid on <details> — it breaks closed-content hiding in Chromium. */
.zst-faq__item > .zst-faq__q {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.zst-faq__item[open] > .zst-faq__q {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.zst-faq__item[open] > .zst-faq__q::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  background: #fff;
  pointer-events: none;
  z-index: 0;
}
.zst-faq__item > .zst-faq__a {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  margin-top: -2px;
  padding-top: 2px;
}
.zst-faq__q::marker { content: none; }
.zst-faq__q::-webkit-details-marker { display: none; }

/* Install steps */
.zst-steps { display: grid; gap: 12px; position: relative; }
.zst-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); padding: 18px; }
.zst-step--device { border-color: rgba(0,201,167,.45); }
.zst-step__num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--z-pink, #ff2d78); color: #fff; font-weight: 800; font-size: 17px; box-shadow: 0 8px 18px -8px rgba(255,45,120,.7); }
.zst-step--device .zst-step__num { background: var(--z-teal, #00c9a7); box-shadow: 0 8px 18px -8px rgba(0,201,167,.7); }
.zst-step__title { margin: 6px 0 10px !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.3 !important; color: var(--z-ink, #080c1c); }
.zst-step ol { list-style: none; padding: 0; counter-reset: zs; }
.zst-step ol > li { counter-increment: zs; position: relative; padding-left: 36px; margin: 0 0 10px; }
.zst-step ol > li::before { content: counter(zs); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff7cc; border: 1px solid #ffd600; color: var(--z-ink, #080c1c); font-size: 12.5px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
@media (min-width: 768px) { .zst-step { grid-template-columns: 48px minmax(0,1fr); padding: 22px 26px; gap: 18px; } .zst-step__num { width: 48px; height: 48px; font-size: 19px; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* Contact */
.zst-contact { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-left: 4px solid var(--z-pink, #ff2d78); border-radius: var(--z-r, 16px); padding: 20px; margin-bottom: 12px; }
.zst-contact__icon { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #fff0f5; color: var(--z-pink, #ff2d78); }
.zst-contact__body a[href^="mailto:"] { font-size: 18px; font-weight: 800; }
.zst-card { background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); padding: 20px; margin: 0 0 12px; }
.zst--contact .zst-article > p { background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); padding: 16px 20px; }
.zst-card ul li::marker { color: var(--z-teal, #00c9a7); }

/* CTA */
.zst-cta { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 28px 0 0; padding: 24px; border-radius: 20px; background: var(--z-ink, #080c1c); color: #fff; }
.zst--policy .zst-cta { max-width: none; }
.zst-cta__title { margin: 0 0 4px !important; font-size: 22px !important; font-weight: 800 !important; color: #fff !important; }
.zst-cta__text { margin: 0 !important; color: #c3c9d9; font-size: 15px; }
.zst-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.zst-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 15px; text-decoration: none !important; }
.zst-btn--pink { background: var(--z-pink, #ff2d78); color: #fff !important; box-shadow: 0 10px 22px -10px rgba(255,45,120,.8); }
.zst-btn--ghost { border: 1px solid rgba(255,255,255,.25); color: #fff !important; }
.zst-btn--ghost:hover { border-color: var(--z-teal, #00c9a7); color: var(--z-teal, #00c9a7) !important; }
@media (min-width: 768px) { .zst-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 32px; } }
@media (max-width: 480px) { .zst-cta__actions .zst-btn { width: 100%; } }
.zst .zst-cta p.zst-cta__text { color: #c3c9d9 !important; }
.zst .zst-cta h2.zst-cta__title { color: #fff !important; }
@media (min-width: 1024px) { .zst-toc .zst-toc__box summary::after, .zst-toc .zst-toc__box[open] summary::after { content: none !important; } }
.zst-sec > :first-child, .zst-card > :first-child, .zst-step__body > :first-child, .zst-faq__a > :first-child, .zst-intro > :first-child { margin-block-start: 0 !important; margin-top: 0 !important; }
.zst h2 { margin-block-start: 0 !important; }
.wp-block-post-content .zst .zst-sec h2, .wp-block-post-content .zst .zst-card h2, .wp-block-post-content .zst .zst-step__title, .wp-block-post-content .zst .zst-cta__title { margin-top: 0 !important; }
.wp-block-post-content .zst .zst-step__title { margin-top: 6px !important; }
.wp-block-post-content .zst h1.zst-title { margin-top: 0 !important; }

/* 1.7.4 — ESTK Card page (/esim-not-supported/) */
.zst--estk .zst-article { max-width: 860px; }
.zes { display: grid; gap: 12px; }
.zes h2 { margin: 0 0 10px !important; font-size: 19px !important; line-height: 1.3 !important; font-weight: 800 !important; color: var(--z-ink, #080c1c); }
.zes h3 { margin: 0 0 4px !important; font-size: 16.5px !important; line-height: 1.3 !important; font-weight: 800 !important; color: var(--z-ink, #080c1c); }
.zes-hero { display: grid; gap: 18px; align-items: center; background: linear-gradient(135deg, #fff0f5 0%, #fff 55%, #e6fbf6 100%); border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); padding: 22px 20px; }
.zes-eyebrow { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(255,45,120,.3); font-size: 13px; font-weight: 800; color: var(--z-pink, #ff2d78); }
.zes-hero__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem) !important; }
.zes-hero__media { display: flex; justify-content: center; }
.zes-hero__media img { width: 170px; height: auto; filter: drop-shadow(0 16px 24px rgba(8,12,28,.18)); }
.zes-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.zes-actions--end { margin-top: 6px; }
.zst-article .zes-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px !important; border-radius: 999px !important; font-size: 16px; font-weight: 800; text-decoration: none !important; transition: transform .12s, background .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.zst-article .zes-btn--primary { background: var(--z-pink, #ff2d78) !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(255,45,120,.7); }
.zst-article .zes-btn--primary:hover { background: #e61e66 !important; color: #fff !important; }
.zst-article .zes-btn--ghost { background: #fff !important; color: var(--z-ink, #080c1c) !important; border: 1.5px solid var(--z-g200, #e2e5ee); }
.zst-article .zes-btn--ghost:hover { border-color: var(--z-pink, #ff2d78); color: var(--z-pink, #ff2d78) !important; }
.zst-article .zes-btn:active { transform: scale(.97); }
.zst-article .zes-btn:focus-visible { outline: 3px solid rgba(255,45,120,.45); outline-offset: 2px; }
.zes-sec { background: #fff; border: 1px solid var(--z-g200, #e2e5ee); border-radius: var(--z-r, 16px); padding: 20px; }
.zes-sec--soft { background: #f3fdfa; border-color: rgba(0,201,167,.3); }
.zes-checks { list-style: none; padding: 0 !important; }
.zes-checks li { position: relative; padding-left: 28px; }
.zes-checks li::before { content: "!"; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff0f5; color: var(--z-pink, #ff2d78); font-size: 13px; font-weight: 900; text-align: center; line-height: 20px; }
.zes-cards { display: grid; gap: 10px; }
.zes-card { background: var(--z-g50, #f8fafc); border: 1px solid var(--z-g200, #e2e5ee); border-radius: 14px; padding: 16px; }
.zes-card p { margin: 0 !important; }
.zes-card__ico { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; margin-bottom: 8px; border-radius: 10px; background: #fff0f5; color: var(--z-pink, #ff2d78); font-size: 18px; font-weight: 800; }
.zes-steps { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 12px; }
.zes-steps li { display: flex; gap: 14px; align-items: flex-start; margin: 0 !important; }
.zes-steps li::marker { content: none; }
.zes-step__n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--z-pink, #ff2d78); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.zes-steps p { margin: 0 !important; }
@media (min-width: 768px) {
  .zes-hero { grid-template-columns: 1fr 220px; padding: 30px 32px; }
  .zes-hero__media img { width: 210px; }
  .zes-sec { padding: 24px 28px; }
  .zes h2 { font-size: 21px !important; }
  .zes-cards { grid-template-columns: repeat(3, 1fr); }
}