/* Xaveno — layout, type, and color live in one system.
   Spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80.
   Measure: Chinese body stays near 28–40 characters. */

:root {
  color-scheme: light;
  --gutter: 40px;
  --page: 1280px;
  --ink: #1d1d1f;
  --soft: #3a3a3c;
  --muted: #6e6e73;
  --faint: #86868b;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --bg: #ffffff;
  --band: #f5f5f7;
  --link: #0066cc;
  --blue: #0071e3;
  --green: #12824e;
  --pink: #d12578;
  --orange: #c46a10;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.06);
  --sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --measure: 38em;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font: 17px/1.75 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: 0.45; cursor: progress; }
::selection { background: #d6e8ff; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip {
  position: fixed;
  top: -80px;
  left: 12px;
  z-index: 40;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
}
.skip:focus { top: 12px; }

.container {
  width: min(var(--page), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* Header --------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
.brand small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
}
.brandmark {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #1d1d1f;
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.06em;
  flex: none;
}
.brand-dot {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2997ff;
  box-shadow: 0 0 0 2px #1d1d1f;
}
#navigation {
  display: flex;
  align-items: center;
  gap: 22px;
}
#navigation a:not(.button) {
  font-size: 14px;
  font-weight: 500;
  color: var(--soft);
  white-space: nowrap;
  padding: 6px 0;
}
#navigation a:not(.button):hover { color: var(--ink); }
#navigation a[aria-current="page"]:not(.button) {
  color: var(--ink);
  box-shadow: inset 0 -1.5px 0 var(--ink);
}
.menu {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Type ----------------------------------------------------------------- */
h1, h2, h3, p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { font-weight: 600; letter-spacing: 0; text-wrap: balance; }
/* 标点挤压：全角标点在行尾不再占整格空白（halt 在 PingFang SC/Hiragino 上生效，其它平台回退原样） */
h1, h2 { font-feature-settings: "halt" 1; }
/* 锚点跳转时给悬浮导航让位，标题不被胶囊盖住 */
[id] { scroll-margin-top: 92px; }
.keep, h1 .keep, h2 .keep, h3 .keep { white-space: nowrap; }
h1 { font-size: clamp(36px, 4vw, 52px); line-height: 1.32; }
h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.35; }
h3 { font-size: 20px; line-height: 1.45; }
.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--faint);
}
.lede {
  margin-top: 16px;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}
.small { font-size: 13px; line-height: 1.7; color: var(--muted); }
.plain-link {
  font-size: 15px;
  font-weight: 550;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.plain-link:hover { color: #004999; }

/* Buttons -------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #1d1d1f;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.button:hover { background: #3a3a3c; color: #fff; }
.button:active { transform: translateY(1px); }
.button.secondary { background: var(--band); color: var(--ink); }
.button.secondary:hover { background: #e8e8ed; color: var(--ink); }
.button.compact { min-height: 36px; padding: 0 14px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .actions, .buyhero .actions { margin-top: 28px; }
main > .actions { margin-bottom: 64px; }

/* Page rhythm ---------------------------------------------------------- */
section { padding: 80px 0; }
.hero { padding: 56px 0 20px; }
.pagehero { padding: 56px 0 12px; }
.first-section { padding-top: 20px; }
section:has(> .contact-banner) { padding: 12px 0 28px; }

.pagehero { display: block; }
.pagehero h1 { max-width: 20em; }
.pagehero .lede { margin-top: 16px; max-width: 34em; }

/* Product icons: soft objects, no chip -------------------------------- */
img.product-icon,
.product-icon {
  display: block;
  flex: none;
  width: 72px;
  height: 72px;
  max-width: none;
  margin: 0 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
}
.pagehero .product-icon,
.offer .product-icon,
.package .product-icon { margin-bottom: 18px; }

/* Home ----------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-image, .buyhero figure {
  margin: 0;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.hero-image img,
.sf-composite,
.buyhero figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
img.product-icon {
  width: 72px;
  height: 72px;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.hero-image figcaption,
.buyhero figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 2px 0;
  background: transparent;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.map-credit {
  display: block;
  margin: 0;
  padding: 4px 2px 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  text-align: right;
  text-wrap: pretty;
}
.keep { white-space: nowrap; }
.map-credit a, .hero-image figcaption a, .buyhero figcaption a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.value-strip, .benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 8px auto 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.value-strip span, .benefits span {
  padding: 20px 16px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 550;
  color: var(--soft);
  white-space: nowrap;
}
.benefits span { text-align: center; }
.value-strip span + span, .benefits span + span { box-shadow: inset 1px 0 0 var(--line); }
.benefits { margin-top: 8px; margin-bottom: 0; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
}
.section-head h2 { max-width: 12em; }
.section-head p { max-width: 28em; color: var(--muted); font-size: 16px; line-height: 1.6; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 28px 28px 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  color: var(--ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.service-card:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.service-card.green { --accent: var(--green); }
.service-card.blue { --accent: var(--blue); }
.service-card.pink { --accent: var(--pink); }
.service-card.orange { --accent: var(--orange); }
.service-card .eyebrow { margin-bottom: 8px; color: var(--accent, var(--faint)); }
.service-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 22px;
}
.service-card h3 span { color: var(--faint); font-size: 16px; font-weight: 500; }
.service-card p {
  margin-top: 10px;
  max-width: 36em;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}
.price {
  margin: 24px 0 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.service-card .price { margin-top: auto; padding-top: 24px; }
.price small {
  margin-left: 2px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.card-end {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 550;
  color: var(--soft);
}

.support-section { background: var(--band); border: 0; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: start;
}
.split .lede { margin-top: 16px; }
.split .plain-link { display: inline-block; margin-top: 20px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.steps li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.steps li > span {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: #6d4eb5;
  padding-top: 4px;
}
.steps h3 { font-size: 18px; }
.steps p { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

.guide-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: center;
  padding: 22px 8px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.guide-row:last-child { border-bottom: 1px solid var(--line); }
.guide-row:hover { background: #fafafa; color: var(--ink); }
.guide-row > span {
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  white-space: nowrap;
}
.guide-row h3 { font-size: 18px; line-height: 1.4; }
.guide-row p { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.guide-row b { color: var(--faint); font-weight: 500; }

.contact-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 40px 44px;
  border-radius: 28px;
  background: #1d1d1f;
  color: #fff;
}
.contact-banner .eyebrow { color: rgba(255, 255, 255, 0.55); margin-bottom: 8px; }
.contact-banner h2 { color: #fff; font-size: clamp(28px, 3vw, 36px); max-width: 12em; }
.contact-banner p { margin-top: 10px; color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.6; }
.contact-banner .button { background: #fff; color: #1d1d1f; }
.contact-banner .button:hover { background: #f5f5f7; color: #1d1d1f; }

.split-copy {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 20px 48px;
  align-items: start;
  padding-top: 16px;
  padding-bottom: 16px;
}
.split-copy h2 { max-width: 14em; }
.split-copy .lede, .split-copy p { max-width: 38em; }
.split-copy .plain-link { display: inline-block; margin-top: 16px; }
.split-copy p + p { margin-top: 12px; }

/* Finder, reading, support -------------------------------------------- */
section:has(> .finder) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: 40px 56px;
  align-items: center;
}
section:has(> .finder) .section-head {
  display: block;
  margin: 0;
}
section:has(> .finder) .section-head p { margin-top: 12px; }
.finder {
  width: 100%;
  max-width: none;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
#finder-result {
  min-height: 4.8em;
  margin: 18px 0;
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.7;
}
.finder .button { margin-top: 4px; }

section.pagehero:has(+ section.reading:has(.vps-table)),
section.reading:has(.vps-table) {
  width: min(46rem, calc(100% - var(--gutter) * 2));
}
section.reading:has(.reading-meta):not(:has(table)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
section.reading .reading-meta {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--muted);
}
section.reading:has(.reading-meta):not(:has(table)) article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}
section.reading:has(.reading-meta):not(:has(table)) article h2 { font-size: 22px; max-width: 14em; }
section.reading:has(.reading-meta):not(:has(table)) article p {
  margin-top: 12px;
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.75;
}
section.reading:has(.reading-meta):not(:has(table)) > .plain-link { grid-column: 1 / -1; margin-top: 4px; }

section.reading:not(:has(.reading-meta)) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
section.reading:not(:has(.reading-meta)) article {
  margin: 0;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--band);
}
section.reading:not(:has(.reading-meta)) h2 { font-size: 22px; }
section.reading:not(:has(.reading-meta)) p { margin-top: 12px; color: var(--soft); font-size: 15.5px; line-height: 1.75; }

section.reading:has(table) article {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
section.reading:has(table) article:first-of-type { border-top: 0; padding-top: 4px; }
section.reading:has(table) h2 { font-size: 26px; margin-bottom: 4px; }
section.reading:has(table) p { margin-top: 12px; color: var(--soft); font-size: 16.5px; line-height: 1.8; }
section.reading:has(table) > .plain-link { display: inline-block; margin-top: 8px; }
.reading ol, .contact-side ol, #payment ol { margin: 14px 0 0; padding-left: 1.25em; }
.reading li, #payment li, .contact-side li { line-height: 1.7; }
.reading li + li, #payment li + li, .contact-side li + li { margin-top: 10px; }

.vps-table-wrap { margin: 18px 0 0; max-width: 100%; overflow-x: auto; }
.vps-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.65; }
.vps-table th, .vps-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.vps-table thead th {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  background: var(--band);
}
.vps-table a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.process-grid article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 24px 24px 28px;
  border: 0;
  border-radius: 22px;
  background: var(--band);
}
.process-grid h2 { margin-top: 10px; font-size: 22px; }
.process-grid p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.stage-no { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; color: var(--blue); }
.support-note {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px 40px;
  align-items: start;
  padding: 36px 40px;
  border-radius: 24px;
  background: var(--band);
}
.support-note h2 { font-size: clamp(26px, 3vw, 32px); max-width: 10em; }
.support-note p { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.75; }

/* Product pages -------------------------------------------------------- */
.product-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas:
    "hero offer"
    "body offer";
  column-gap: 56px;
  row-gap: 8px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 72px;
}
.product-page .pagehero {
  grid-area: hero;
  display: block;
  width: auto;
  padding: 8px 0 0;
}
.product-page .pagehero h1 { max-width: 10em; }
.product-page .pagehero .lede { margin-top: 14px; max-width: 32em; }
.product-page .article-body { grid-area: body; min-width: 0; padding-top: 8px; }
.product-page .offer {
  grid-area: offer;
  align-self: start;
  position: sticky;
  top: 88px;
  margin-top: 8px;
}
.article-body article { padding: 26px 0; border-top: 1px solid var(--line); }
.article-body article:first-child { border-top: 0; padding-top: 18px; }
.article-body h2 { font-size: 22px; }
.article-body p { margin-top: 10px; max-width: 38em; color: var(--soft); font-size: 16.5px; line-height: 1.75; }
.article-body .plain-link { display: inline-block; margin-top: 14px; }
.offer, .package {
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.offer .eyebrow, .package .eyebrow { margin-bottom: 8px; }
.offer.blue { --accent: var(--blue); }
.offer.pink { --accent: var(--pink); }
.offer.orange { --accent: var(--orange); }
.offer .eyebrow, .package .eyebrow { color: var(--accent, var(--faint)); }
.offer .price { margin: 4px 0 12px; font-size: 36px; }
.offer p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.offer .button, .package .button { display: flex; width: 100%; margin: 20px 0 12px; }
.offer .plain-link { display: inline-block; margin-top: 12px; }
.offer .small { display: block; margin-top: 8px; }

/* Android -------------------------------------------------------------- */
.notice {
  width: min(var(--page), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: 18px 0 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0;
}
.buyhero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px 48px;
  align-items: center;
  padding-top: 28px;
  padding-bottom: 28px;
}
.buyhero h1 { font-size: clamp(36px, 4.4vw, 56px); }
.buyhero .small { margin-top: 16px; }
.buyhero .small .plain-link { font-size: inherit; }

#features .feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 28px;
  margin-top: 32px;
  align-items: stretch;
}
#features .feature-grid article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
}
.feature-art { margin: 0 0 18px; }
.feature-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  object-fit: cover;
  object-position: center;
  background: #eef1f4;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}
.feature-art figcaption {
  position: static;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 12px;
  color: var(--faint);
}
#features h3 { font-size: 22px; }
#features article p {
  margin: 10px 0 0;
  max-width: 40em;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
}
#features article small {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.5;
}

.flow { background: var(--band); }
#scope .feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
  align-items: stretch;
}
#scope .feature-grid article:nth-child(1) { grid-column: 1; grid-row: 1; }
#scope .feature-grid article:nth-child(3) { grid-column: 2; grid-row: 1; }
#scope .feature-grid article:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
#scope .feature-grid article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px 22px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 22px;
  background: #fff;
}
#scope .feature-art { margin: 0 0 14px; }
#scope .feature-art img { border-radius: 16px; box-shadow: none; }
#scope .feature-art figcaption { margin-top: 8px; }
#scope .feature-grid h3 { margin: 0; font-size: 18px; text-wrap: balance; }
#scope .feature-grid p { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
#scope .small { margin-top: 20px; max-width: 52em; }

#scope .app-logos {
  grid-template-columns: repeat(6, max-content);
  justify-content: start;
  width: max-content;
  max-width: 100%;
  gap: 8px 36px;
}
.app-logos {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 16px 28px;
  width: max-content;
  max-width: 100%;
  font-size: 13px;
  counter-reset: none;
}
.app-logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  counter-increment: none;
}
#scope .app-logos li::before,
#scope .app-logos li::after,
.app-logos li::before,
.app-logos li::after {
  content: none;
  display: none;
}
.app-logos img {
  width: 48px;
  height: 48px;
  max-width: none;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.app-logos span {
  display: block;
  width: max-content;
  max-width: none;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  white-space: nowrap;
}

.buying {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 36px 56px;
  align-items: start;
}
.buying > * { min-width: 0; }
.buying p { margin-top: 16px; color: var(--muted); }
.buying .plain-link { display: inline-block; margin-top: 16px; }
.package { position: sticky; top: 88px; }
.bigprice {
  margin: 8px 0 16px;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bigprice small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.package dl {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  margin: 8px 0 0;
}
.package dt, .package dd {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.6;
}
.package dt { color: var(--muted); white-space: nowrap; }
.package dd { color: var(--soft); }
.period-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.period-options button {
  min-width: 0;
  padding: 10px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fafafa;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.period-options b {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.period-options button[aria-pressed="true"] {
  border-color: var(--ink);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.package .small { margin-top: 12px; }

.flow > .container > ol {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  counter-reset: step;
}
.flow > .container > ol > li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 20px 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  background: #fff;
}
.flow > .container > ol > li::before {
  content: "0" counter(step);
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.flow > .container > ol b { font-size: 16px; font-weight: 650; line-height: 1.45; }
.flow > .container > ol > li p { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }

.faq {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px 56px;
  align-items: start;
}
.faq-intro h2 { max-width: 12em; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 0.9em;
  height: 0.9em;
  flex: none;
  margin: 0;
  background: currentColor;
  -webkit-mask: url("assets/icons/kubai/chevron-down.svg") center / contain no-repeat;
  mask: url("assets/icons/kubai/chevron-down.svg") center / contain no-repeat;
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { margin-top: 12px; max-width: 42em; color: var(--muted); font-size: 15.5px; line-height: 1.7; }

.check { background: var(--band); }
.check #inquiry {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
#check { scroll-margin-bottom: 96px; }

.mobile-buy { display: none; }

/* Forms and contact ---------------------------------------------------- */
label { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 650; }
label:first-of-type, .finder label:first-of-type { margin-top: 0; }
input, select, textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
}
textarea { min-height: 104px; resize: vertical; }
select {
  appearance: none;
  padding-right: 40px;
  background-image: url("assets/icons/kubai/chevron-down.svg");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: right 14px center;
}
input::placeholder, textarea::placeholder { color: #8e8e93; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.15);
}
#guide-search { max-width: none; }
#guide-count { margin: 12px 0 4px; }
#guide-empty { margin-top: 16px; color: var(--muted); }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 40px 56px;
  align-items: start;
}
.contact-layout #inquiry { margin-top: 8px; background: none; border: 0; box-shadow: none; padding: 0; }
.contact-layout #inquiry .button { margin-top: 20px; }
.contact-side {
  position: sticky;
  top: 88px;
  padding: 28px;
  border-radius: 24px;
  background: var(--band);
}
.contact-side h2 { font-size: 28px; }
.contact-side h3 { margin-top: 4px; font-size: 18px; }
.contact-side .small { margin-top: 8px; }
.contact-side li { color: var(--soft); font-size: 15px; }
.contact-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.contact-id span { font-size: 13px; color: var(--muted); }
.contact-id strong { font-size: 18px; letter-spacing: 0.01em; white-space: nowrap; }
.text-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--link);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.status { min-height: 1.5em; margin: 10px 0 0; font-size: 13px; color: #1d6b45; }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--band);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.7;
}
#payment .split-copy { padding-top: 0; padding-bottom: 8px; }
#payment .contact-layout { margin-top: 28px; align-items: stretch; }
#payment .contact-side { position: static; height: 100%; background: #fff; border: 1px solid var(--line); }
#payment details summary { cursor: pointer; font-weight: 650; padding: 8px 0; }
#payment details img {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 16px auto;
  border-radius: 16px;
  border: 1px solid var(--line);
}

/* Footer --------------------------------------------------------------- */
.footer-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px 28px;
  align-items: center;
  padding: 36px 0 20px;
  border-top: 1px solid var(--line);
}
.footer-main p { margin: 0; color: var(--muted); font-size: 14px; }
.footer-main > div { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.footer-main a:hover { color: var(--link); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 0 32px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}

/* Breakpoints ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero, .buyhero, .split, .buying, .contact-layout, .product-page { gap: 32px 36px; }
  .product-page { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  #navigation { gap: 16px; }
}

@media (max-width: 980px) {
  #scope .feature-grid { grid-template-columns: 1fr; }
  #scope .feature-grid article:nth-child(1),
  #scope .feature-grid article:nth-child(2),
  #scope .feature-grid article:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
  section.reading:not(:has(.reading-meta)),
  .process-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow > .container > ol { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero, .buyhero, .split, .detail-layout, .contact-layout, .buying, .faq, .support-note, .split-copy,
  section:has(> .finder) {
    grid-template-columns: 1fr;
  }
  .product-page {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "offer" "body";
  }
  .product-page .offer { position: static; margin-top: 8px; }
  .pagehero { grid-template-columns: 1fr; align-items: start; }
  .pagehero h1, .pagehero .lede, .pagehero .eyebrow { grid-column: auto; }
  .pagehero .lede { margin-top: 14px; }
  .package, .contact-side, .product-page .offer { position: static; }
  .hero-image, .buyhero figure { max-width: 560px; }
}

@media (max-width: 880px) {
  .menu { display: inline-flex; }
  #navigation {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
  }
  #navigation.open { display: flex; }
  #navigation a:not(.button) { padding: 12px 10px; font-size: 16px; }
  #navigation .button { width: 100%; margin-top: 6px; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  section { padding: 56px 0; }
  .hero, .buyhero { padding-top: 32px; padding-bottom: 20px; }
  .pagehero { padding-top: 36px; }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .lede { font-size: 16.5px; }
  .service-grid, .process-grid, section.reading:has(.reading-meta):not(:has(table)) {
    grid-template-columns: 1fr;
  }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .contact-banner { grid-template-columns: 1fr; padding: 28px 22px; }
  .flow > .container > ol { grid-template-columns: 1fr 1fr; }
  .footer-main, .footer-bottom { grid-template-columns: 1fr; display: grid; }
  .footer-bottom { gap: 8px; }
  .vps-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vps-table, .vps-table tbody, .vps-table tr, .vps-table th, .vps-table td { display: block; width: auto; }
  .vps-table tr { padding: 6px 0 14px; border-bottom: 1px solid var(--line); }
  .vps-table td, .vps-table th[scope="row"] { border: 0; padding: 6px 0; white-space: normal; }
  .vps-table th[scope="row"] { font-size: 17px; padding-top: 14px; }
  .vps-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
  }
}

@media (max-width: 640px) {
  #features .feature-grid, .process-grid { grid-template-columns: 1fr; }
  .flow > .container > ol { grid-template-columns: 1fr; }
  .guide-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 12px;
  }
  .guide-row > span { grid-column: 1 / -1; }
  .guide-row b { align-self: center; }
  section.reading:not(:has(.reading-meta)) { grid-template-columns: 1fr; }
  .support-note { padding: 24px 20px; }
  .offer, .package, .service-card, .finder, .check #inquiry { padding: 22px; }
}

@media (max-width: 560px) {
  .value-strip, .benefits { grid-template-columns: 1fr; }
  .value-strip span, .benefits span { white-space: normal; text-align: left; padding: 14px 0; }
  .value-strip span + span, .benefits span + span { box-shadow: none; border-top: 1px solid var(--line); }
  #scope .app-logos,
  .app-logos {
    grid-template-columns: repeat(3, max-content);
    width: max-content;
    gap: 18px 28px;
  }
  .app-logos img { width: 52px; height: 52px; }
}

@media (max-width: 420px) {
  .period-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 32px; }
}

.fit-note {
  width: min(var(--page), calc(100% - var(--gutter) * 2));
  margin: 16px auto 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f5f5f7;
  font-size: 15px;
  line-height: 1.65;
}
.fit-note span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.offer-table { width: 100%; }
.howto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.howto li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}
.howto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 12px;
  background: #eef1f4;
}
.howto img.ios-shot { aspect-ratio: 4 / 3; }
@media (min-width: 701px) {
  .howto.ios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.howto b { font-size: 18px; line-height: 1.4; }
.howto p { margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.offer-table {
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  table-layout: fixed;
}
.offer-table th, .offer-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

#howto { padding-bottom: 64px; }
#scope { padding-top: 64px; padding-bottom: 64px; }
#compat { padding-top: 64px; padding-bottom: 12px; }
#plans { padding-top: 36px; padding-bottom: 64px; }
section:has(> .assure) { padding-top: 48px; padding-bottom: 48px; }

.compat-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 28px 56px;
  align-items: start;
}
.compat-layout h2 { max-width: 8em; }
.compat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}
.compat-grid > div {
  min-width: 0;
  margin: 0;
  padding: 16px 18px 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.compat-grid .span-2 { grid-column: 1 / -1; }
.compat-grid dt {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--faint);
}
.compat-grid dd {
  margin: 6px 0 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.compat-grid .is-ok {
  background: #f3faf6;
  border-color: rgba(18, 130, 78, 0.22);
}
.compat-grid .is-ok dd {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
}
.ok-mark { display: block; flex: none; }
.ki {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.22em;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: var(--ki) center / contain no-repeat;
  mask: var(--ki) center / contain no-repeat;
  transition: transform 0.15s ease;
}
.ki-arrow { --ki: url("assets/icons/kubai/arrow-up-right.svg"); }
.ki-pin { --ki: url("assets/icons/kubai/map-pin.svg"); margin-left: 0; margin-right: 0.2em; }
.ki-route { --ki: url("assets/icons/kubai/route.svg"); margin-left: 0; margin-right: 0.2em; }
.ki-check { --ki: url("assets/icons/kubai/check.svg"); margin: 0; color: var(--green); }
.ki-lock { --ki: url("assets/icons/kubai/lock.svg"); margin: 0; color: var(--ink); }
.is-ok dd { gap: 6px; }
.menu::before,
[data-copy]::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ki) center / contain no-repeat;
  mask: var(--ki) center / contain no-repeat;
}
.menu::before { --ki: url("assets/icons/kubai/menu.svg"); }
[data-copy]::before { --ki: url("assets/icons/kubai/copy.svg"); margin-right: 0.3em; }
.text-button { display: inline-flex; align-items: center; }
.plain-link:hover .ki, .button:hover .ki { transform: translate(1px, -1px); }
.faq summary:hover::after { transform: translateY(1px); }
.faq details[open] summary:hover::after { transform: rotate(180deg) translateY(-1px); }

.plan-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.plan-cards li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 168px;
  padding: 20px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}
.plan-name {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--muted);
}
.plan-price {
  margin-top: 18px;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan-price small {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--muted);
}
.plan-avg {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.plan-cards .best {
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #fff;
}
.plan-cards .best .plan-name,
.plan-cards .best .plan-price small,
.plan-cards .best .plan-avg { color: rgba(255, 255, 255, 0.72); }
.plan-cards.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-cards.single { grid-template-columns: 1fr; }
.plan-cards.single li {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 28px;
  min-height: 0;
}
.plan-cards.single .plan-price { margin-top: 10px; }
.plan-cards.single .plan-avg { max-width: 16em; padding-top: 0; }
.tag {
  position: absolute;
  top: 16px;
  right: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}
#plans .small { margin-top: 16px; max-width: 46em; }
.assure {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 12px 36px;
  align-items: start;
  padding: 28px 32px;
  border-radius: 24px;
  background: #f5f5f7;
}
.assure h2 { max-width: 8em; }
.assure ul { margin: 0; padding-left: 0; list-style: none; }
.assure li { position: relative; padding-left: 1.55em; line-height: 1.7; }
.assure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.05em;
  height: 1.05em;
  background: var(--green);
  -webkit-mask: url("assets/icons/kubai/check.svg") center / contain no-repeat;
  mask: url("assets/icons/kubai/check.svg") center / contain no-repeat;
}
.assure li + li { margin-top: 8px; }
.dock { display: none; }
.toast {
  position: fixed;
  left: 50%;
  z-index: 40;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: #1d1d1f;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.toast[hidden] { display: none; }
@media (max-width: 900px) {
  .howto { grid-template-columns: 1fr; }
  .assure { grid-template-columns: 1fr; padding: 22px; }
  .compat-layout { grid-template-columns: 1fr; gap: 22px; }
  .plan-cards { grid-template-columns: 1fr 1fr; }
  .plan-cards.single { grid-template-columns: 1fr; }
  .plan-cards.single li { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .dock {
    display: flex;
    align-items: stretch;
    gap: 6px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    transition: transform 0.25s ease;
    width: 100%;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  .dock button, .dock a {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    color: #1d1d1f;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
  }
  .dock-copy { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
  .dock.dock-away { transform: translateY(110%); pointer-events: none; }
  body:has(.dock) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  #howto { padding-bottom: 40px; }
  #scope { padding-top: 48px; padding-bottom: 48px; }
  #compat { padding-top: 48px; padding-bottom: 8px; }
  #plans { padding-top: 28px; padding-bottom: 48px; }
  section:has(> .assure) { padding-top: 36px; padding-bottom: 36px; }
  .plan-cards { gap: 10px; }
  .plan-cards li { min-height: 148px; padding: 16px 14px 14px; }
  .plan-price { margin-top: 14px; font-size: 28px; }
  .plan-price small { font-size: 12px; }
  .plan-avg { font-size: 12px; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* 2026-11-10 polish ------------------------------------------------------ */
.inline-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Home hero: price anchor + quiet contact line */
.hero-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  margin: 26px 0 0;
  max-width: 30em;
}
.hero-prices > div { padding: 2px 26px 2px 0; }
.hero-prices > div + div { padding-left: 26px; box-shadow: inset 1px 0 0 var(--line-strong); }
.hero-prices dt { font-size: 13px; line-height: 1.4; color: var(--muted); }
.hero-prices dd { margin: 4px 0 0; font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
.hero-prices dd small { margin-left: 2px; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.hero .actions { margin-top: 26px; }
.hero-contact { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.hero-contact strong { color: var(--ink); font-weight: 600; letter-spacing: 0.01em; }
.hero-contact a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; white-space: nowrap; }
.hero-contact a:hover { color: var(--link); }

/* Offer asides: second, calmer action */
.offer .offer-wx, .package .offer-wx { display: flex; margin: -2px auto 4px; justify-content: center; font-size: 14px; }
.package .offer-wx { margin-bottom: 16px; }

/* Services comparison */
.plan-inline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.plan-inline li { line-height: 1.45; }
.plan-inline b { font-weight: 650; }
.plan-inline small { display: block; font-size: 12.5px; color: var(--muted); }
.offer-note { margin-top: 16px; max-width: 46em; }
.offer-actions { margin-top: 22px; }

/* Contact: payee explanation */
.payee-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 28px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #f5f5f7;
  font-size: 15px;
  line-height: 1.65;
  color: var(--soft);
}
.payee-note .ki { flex: none; margin-top: 0.3em; color: var(--muted); }
#inquiry-output .actions { gap: 10px; }

/* Support & refund comparison */
.policy-section { padding-top: 56px; padding-bottom: 56px; }
.policy-section .section-head { margin-bottom: 20px; }
.policy-section .section-head p.small { font-size: 14px; }
.policy-wrap { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; }
.policy-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.65; table-layout: fixed; }
.policy-table th, .policy-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.policy-table thead th { border-top: 0; padding-top: 12px; padding-bottom: 12px; font-size: 12px; font-weight: 650; color: var(--muted); background: var(--band); }
.policy-table thead th:first-child { width: 15%; }
.policy-table tbody th { font-size: 16px; font-weight: 650; color: var(--ink); }
.policy-table td { color: var(--soft); }
.process-grid.first-section, section.first-section:has(> .process-grid) { padding-bottom: 8px; }
section.process-grid { padding-bottom: 8px; }

/* About facts */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0 0 28px; }
.facts > div { padding: 16px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 13px; font-weight: 650; color: var(--muted); }
.facts dd { margin: 6px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--soft); }
.facts dd strong { color: var(--ink); }
.facts .text-button { margin-left: 8px; vertical-align: 1px; }
section.reading:not(:has(.reading-meta)) { padding-bottom: 8px; }

/* Guides list date */
.guide-row time { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--faint); }

/* Footer: durable contact text (dock remains the mobile sticky action) */
.site-footer { margin-top: 24px; }
.site-footer .footer-main { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 18px; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.footer-links a:hover { color: var(--link); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 0 0 18px; font-size: 14px; color: var(--muted); }
.footer-contact > span { display: inline-flex; align-items: center; gap: 8px; }
.footer-contact strong { color: var(--ink); font-weight: 600; letter-spacing: 0.01em; }
.footer-contact a:hover strong { color: var(--link); }

@media (max-width: 900px) {
  .plan-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .facts { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .hero-prices { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-prices > div { padding-right: 12px; }
  .hero-prices > div + div { padding-left: 14px; }
  .hero-prices dd { font-size: 22px; }
  .hero-prices dd small { font-size: 12.5px; }
  .site-footer .footer-main { grid-template-columns: 1fr; }
  .policy-section { padding-top: 40px; padding-bottom: 40px; }
  .policy-wrap { border: 0; border-radius: 0; overflow: visible; }
  .policy-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .policy-table, .policy-table tbody, .policy-table tr, .policy-table th, .policy-table td { display: block; width: auto; }
  .policy-table tr { margin-top: 12px; padding: 6px 18px 12px; border: 1px solid var(--line); border-radius: 18px; }
  .policy-table th, .policy-table td { border: 0; padding: 8px 0; }
  .policy-table tbody th { padding-top: 12px; font-size: 17px; }
  .policy-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 650; color: var(--muted); }
  .footer-contact { flex-direction: column; gap: 8px; }
}

@media (max-width: 420px) {
  .hero-prices dd { font-size: 20px; }
  .hero-prices > div { padding-right: 8px; }
  .hero-prices > div + div { padding-left: 10px; }
}

@media (max-width: 760px) {
  .offer-table, .offer-table tbody, .offer-table tr, .offer-table th, .offer-table td { display: block; width: auto; }
  .offer-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .offer-table th, .offer-table td { padding: 0; border: 0; }
  .offer-table th { margin-bottom: 6px; font-size: 16px; }
  .plan-inline { gap: 12px 16px; }
  .plan-inline small { white-space: nowrap; }
}
#payment .contact-layout { align-items: start; }
#payment .contact-side { height: auto; }


/* 2026-11-10 rich pass ---------------------------------------------------- */
:root {
  --tint-green: linear-gradient(150deg, #e2f5ea 0%, #b9e3cb 100%);
  --tint-blue: linear-gradient(150deg, #e3efff 0%, #b5d3f8 100%);
  --tint-pink: linear-gradient(150deg, #ffe6f1 0%, #f5b6d2 100%);
  --tint-orange: linear-gradient(150deg, #fff0de 0%, #f6cc9f 100%);
}

/* Home stage */
.stage {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60% 85% at 92% 8%, rgba(0, 113, 227, 0.55), transparent 62%),
    radial-gradient(55% 80% at 0% 100%, rgba(18, 130, 78, 0.55), transparent 60%),
    radial-gradient(45% 55% at 58% 112%, rgba(209, 37, 120, 0.42), transparent 62%),
    #0d1412;
}
.stage .hero { padding: 64px 0 72px; }
@font-face {
  font-family: "Xaveno Serif";
  src: url("assets/fonts/noto-serif-sc-kicker.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4F4D, U+5361, U+591A, U+5B9A, U+5F00, U+6253;
}

.hero-kicker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 28px;
}
.hero-copy { overflow: visible; }
.kicker-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.46em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.52);
  padding-left: 0.2em;
  margin-left: -0.2em;
  padding-right: 0.46em;
}
.kicker-words {
  display: flex;
  align-items: center;
  margin: 0;
  font-family: "Xaveno Serif", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #f3efe6;
}
.kicker-words span {
  display: flex;
  align-items: center;
}
.kicker-words span + span::before {
  content: "";
  width: 1px;
  height: 0.7em;
  margin: 0 0.95em 0 0.55em;
  background: rgba(243, 239, 230, 0.32);
  flex: none;
}
.stage h1 { color: #fff; font-size: clamp(40px, 5vw, 64px); line-height: 1.22; }
.stage .lede { color: rgba(255, 255, 255, 0.78); }
.stage .hero-prices > div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22); }
.stage .hero-prices dt { color: rgba(255, 255, 255, 0.62); }
.stage .hero-prices dd { color: #fff; }
.stage .hero-prices dd small { color: rgba(255, 255, 255, 0.62); }
.stage .button { background: #fff; color: #1d1d1f; }
.stage .button:hover { background: #e8e8ed; color: #1d1d1f; }
.stage .button.secondary { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.stage .button.secondary:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.stage .hero-contact { color: rgba(255, 255, 255, 0.66); }
.stage .hero-contact strong, .stage .hero-contact a { color: #fff; }
.stage .hero-contact a { text-decoration-color: rgba(255, 255, 255, 0.4); }
.stage .hero-image figcaption, .stage .map-credit { color: rgba(255, 255, 255, 0.58); }
.stage .hero-image figcaption a, .stage .map-credit a { color: rgba(255, 255, 255, 0.82); }
.stage .hero-image { width: min(100%, 320px); justify-self: center; }
.stage .hero-image img.home-shot {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 40px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) {
  .stage .hero-image { justify-self: center; }
}
.stage + .value-strip { margin-top: 0; border-top: 0; }

.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  color: #1d1d1f;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  line-height: 1.35;
  white-space: nowrap;
}
.float-card b { display: block; font-size: 15px; font-weight: 650; }
.float-card span { display: block; font-size: 13px; color: var(--muted); }
.float-card img { width: 44px; height: 44px; border-radius: 11px; display: block; box-shadow: none; }
.fc-pin { width: 44px; height: 44px; border-radius: 50%; background: var(--green); position: relative; flex: none; }
.fc-pin::after { content: ""; position: absolute; inset: 11px; background: #fff; -webkit-mask: url("assets/icons/kubai/map-pin.svg") center / contain no-repeat; mask: url("assets/icons/kubai/map-pin.svg") center / contain no-repeat; }
.fc-loc { left: -28px; bottom: 16%; }
.fc-wx { right: -22px; top: 9%; }

/* Scene cards */
.service-card.scene-card { padding: 0; overflow: hidden; }
.card-scene { position: relative; height: 236px; overflow: hidden; }
.scene-card.green .card-scene { background: var(--tint-green); }
.scene-card.blue .card-scene { background: var(--tint-blue); }
.scene-card.pink .card-scene { background: var(--tint-pink); }
.scene-card.orange .card-scene { background: var(--tint-orange); }
.card-scene img {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 60%;
  height: calc(100% - 28px);
  transform: translateX(-50%);
  object-fit: cover;
  object-position: 50% var(--pos, 0%);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}
.scene-card:hover .card-scene img { transform: translateX(-50%) translateY(-4px); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 0 28px 22px; }
.card-body .product-icon { position: relative; z-index: 1; margin: -34px 0 14px; width: 68px; height: 68px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.14)); }

/* Use cases */
.usecases { background: linear-gradient(180deg, #eef7f1 0%, #eef3fc 100%); }
.usecase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.usecase-grid article { display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 34px rgba(20, 60, 40, 0.07); }
.uc-logo { display: block; width: 56px; height: 56px; border-radius: 14px; object-fit: contain; }
.usecase-grid h3 { margin-top: 18px; font-size: 19px; }
.usecase-grid p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--soft); }
.usecase-grid .plain-link { margin-top: auto; padding-top: 16px; font-size: 14px; }

/* Product heroes */
.phero { background: var(--ph); }
.phero.green { --ph: radial-gradient(70% 110% at 82% 40%, #b4e3c8 0%, rgba(180, 227, 200, 0) 70%), linear-gradient(180deg, #ecf8f1 0%, #f6fbf8 100%); }
.phero.blue { --ph: radial-gradient(70% 110% at 82% 40%, #b8d6fb 0%, rgba(184, 214, 251, 0) 70%), linear-gradient(180deg, #edf4ff 0%, #f7faff 100%); }
.phero.pink { --ph: radial-gradient(70% 110% at 82% 40%, #f7bcd7 0%, rgba(247, 188, 215, 0) 70%), linear-gradient(180deg, #fff0f6 0%, #fff8fb 100%); }
.phero.orange { --ph: radial-gradient(70% 110% at 82% 40%, #f8d2a8 0%, rgba(248, 210, 168, 0) 70%), linear-gradient(180deg, #fff5ea 0%, #fffaf4 100%); }
.phero .buyhero { padding: 44px 0 56px; }
.phero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.22; }
.phero .eyebrow { color: var(--accent, var(--faint)); }
.phero.green { --accent: var(--green); }
.phero.blue { --accent: var(--blue); }
.phero.pink { --accent: var(--pink); }
.phero.orange { --accent: var(--orange); }
.buyhero figure.hero-shot { justify-self: center; width: min(100%, 420px); max-width: 420px; }
.buyhero figure.hero-shot img { border-radius: 34px; box-shadow: 0 34px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.buyhero figure.hero-shot figcaption { justify-content: center; text-align: center; }
.fit-note + .phero, .notice + .fit-note + .phero { margin-top: 16px; }
.product-page { grid-template-areas: "body offer"; padding-top: 48px; }

/* Android feature stories */
.stories { display: grid; gap: 64px; margin-top: 40px; }
.story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.story.flip .story-art { order: 2; }
.story-art { margin: 0; padding: 36px; border-radius: 32px; background: var(--tint-green); }
.story-art img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 26px 56px rgba(16, 80, 48, 0.2); }
.story-art figcaption { margin-top: 12px; font-size: 12px; color: #2f6448; }
.story-copy .eyebrow { color: var(--green); }
.story-copy h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.3; }
.story-copy p { margin-top: 16px; max-width: 28em; font-size: 17px; line-height: 1.75; color: var(--soft); }
.story-copy small { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--green); }
.more-head h3 { margin: 72px 0 20px; font-size: 24px; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.more-grid .feature-art { margin-bottom: 14px; }
.more-grid h3 { font-size: 19px; }
.more-grid p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* Tinted how-to bands */
.tint { padding: 72px 0; }
.tint.blue { background: linear-gradient(180deg, #edf4ff 0%, #f7faff 100%); }
.tint.pink { background: linear-gradient(180deg, #fff0f6 0%, #fff8fb 100%); }
.tint.orange { background: linear-gradient(180deg, #fff5ea 0%, #fffaf4 100%); }
.tint .howto li { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 36px rgba(0, 0, 0, 0.07); }
.tint .eyebrow { color: var(--accent, var(--faint)); }
.tint.blue { --accent: var(--blue); }
.tint.pink { --accent: var(--pink); }

@media (max-width: 1024px) {
  .usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-loc { left: -12px; }
  .fc-wx { right: -8px; }
}

@media (max-width: 900px) {
  .product-page { grid-template-areas: "offer" "body"; padding-top: 32px; }
  .story, .story.flip { grid-template-columns: 1fr; gap: 24px; }
  .story.flip .story-art { order: 0; }
  .story-art { padding: 22px; }
  .stage .hero-image { width: min(100%, 300px); max-width: 300px; }
  .buyhero figure.hero-shot { justify-self: start; width: min(100%, 380px); }
}

@media (max-width: 760px) {
  .stage .hero { padding: 36px 0 96px; }
  .stage .hero-image { width: min(72vw, 280px); max-width: 280px; justify-self: center; margin-inline: auto; }
  .stage .hero-image img.home-shot {
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }
  .hero-kicker { gap: 12px; margin-bottom: 22px; }
  .kicker-words { font-size: 32px; letter-spacing: 0.1em; }
  .kicker-words span + span::before { margin: 0 0.75em 0 0.4em; }
  .stage h1 { font-size: 36px; }
  .phero h1 { font-size: 34px; }
  .phero .buyhero { padding: 28px 0 40px; }
  .card-scene { height: 210px; }
  .card-scene img { width: 66%; }
  .stories { gap: 48px; }
  .more-head h3 { margin-top: 56px; }
  .tint { padding: 52px 0; }
  .fc-loc { left: 10px; bottom: 14%; }
  .fc-wx { right: 10px; top: 6%; }
  .float-card { padding: 9px 14px 9px 9px; gap: 10px; border-radius: 15px; }
  .float-card img, .fc-pin { width: 36px; height: 36px; }
  .fc-pin::after { inset: 9px; }
  .float-card b { font-size: 14px; }
  .float-card span { font-size: 12px; }
}

@media (max-width: 640px) {
  .more-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .usecase-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .stage h1 { font-size: 33px; }
  .phero h1 { font-size: 31px; }
}
.phero, .stage { padding: 0; }
.phero .buyhero { padding: 56px 0 64px; }
.stage .hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.stage h1 { font-size: clamp(38px, 4.3vw, 54px); }
@media (max-width: 900px) { .stage .hero { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .phero .buyhero { padding: 32px 0 44px; } .stage h1 { font-size: 36px; } }
@media (max-width: 420px) { .stage h1 { font-size: 32px; } }
body:has(.phero.green) .assure { background: #eaf6ef; }
body:has(.phero.blue) .assure { background: #ecf3fe; }
body:has(.phero.pink) .assure { background: #fdeef5; }
body:has(.phero.orange) .assure { background: #fdf1e4; }
section.product-page { padding-bottom: 32px; }

/* Product shelf and specification selection, local preview 2026-11-10. */
.purchase{margin-top:28px;padding:24px;background:rgba(255,255,255,.85);border:1px solid var(--line,#deded9);border-radius:18px;max-width:620px;color:var(--ink);text-align:left;min-width:0}
.purchase-label{font-size:13px;font-weight:600;margin-bottom:12px}.sku-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.sku-options:empty{display:none}.sku-options button{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;min-height:72px;padding:10px 5px;border:1px solid #d4d7d5;background:transparent;color:inherit;border-radius:9px;font:inherit;cursor:pointer;transition:background .18s,border-color .18s}.sku-options button span{font-size:12px}.sku-options button b{font-size:18px;font-variant-numeric:tabular-nums}.sku-options button[aria-pressed=true]{border-color:#245a47;background:#e8f1e9;box-shadow:inset 0 0 0 1px #245a47}.sku-options button:hover{background:#edf2ed}.purchase-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 4px;padding-top:18px;border-top:1px solid #dcded8}.purchase-total>span{font-size:13px}.purchase-total strong{font-size:38px;line-height:1.2;letter-spacing:-1.3px;font-variant-numeric:tabular-nums}.purchase-cycle{font-size:12px!important;line-height:1.8!important;margin:9px 0 18px!important;color:#63685f}.purchase .purchase-consult{display:flex;width:100%;white-space:normal;text-align:center;gap:10px;font-size:13px;padding:14px 12px;line-height:1.7}.purchase-tools{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:#61665e}.purchase-tools button{font-size:12px;color:inherit}.purchase-trial{font-size:11px!important;line-height:1.9!important;color:#6b7067;margin:14px 0 0!important}.purchase-feedback{font-size:12px!important;margin:8px 0 0!important;color:#245a47}.purchase-feedback:empty{display:none}.purchase-details{display:block!important}.purchase-details .article-body{max-width:850px}.shelf-periods{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 24px;font-size:11px}.shelf-periods span{padding:5px 8px;background:#ffffffa8;border-radius:5px}.service-card .card-end{font-weight:600;font-size:13px}.spec-card{transform:none!important}.spec-card .card-body{min-width:0}.spec-card .purchase{margin-top:20px;padding:18px}.spec-card .card-end{display:none}.spec-card .purchase-total strong{font-size:30px}.spec-card .sku-options{grid-template-columns:repeat(2,minmax(0,1fr))}.spec-card .price{margin-bottom:14px}.buyhero{align-items:start}.buyhero>.hero-shot{align-self:center}.purchase [data-consult]:focus-visible,.sku-options button:focus-visible{outline:3px solid #36735c;outline-offset:3px}
@media(min-width:901px){.phero .buyhero{padding-top:50px;padding-bottom:50px}.phero .buyhero h1{font-size:clamp(36px,3.5vw,54px)}.phero .buyhero .lede{font-size:15px;margin-top:16px}.phero .buyhero .product-icon{width:45px;height:45px}.phero .buyhero .eyebrow{margin-bottom:10px}}
@media(max-width:600px){.purchase{padding:18px;margin-top:24px}.sku-options{grid-template-columns:repeat(2,minmax(0,1fr))}.sku-options button{min-height:66px}.purchase-total strong{font-size:34px}.spec-card .purchase{padding:14px}.hero-copy h1{font-size:clamp(32px,8.7vw,44px)}.purchase-tools{font-size:11px}}
.spec-card .card-body>.price,.spec-card .shelf-periods{display:none}.spec-card .card-body>p{min-height:54px}.spec-card .purchase{margin-top:20px}.spec-card .sku-options{min-height:152px;align-content:start}.spec-card .sku-options:empty{display:grid;align-content:center}.spec-card .sku-options:empty:before{content:'用途 · 地区 · 周期';font-size:15px;color:var(--muted);grid-column:1/-1}.spec-card .purchase-total{margin-top:18px}@media(max-width:600px){.spec-card .card-body>p{min-height:0}.spec-card .sku-options{min-height:0}.spec-card .sku-options:empty{min-height:64px}}

/* Review fixes: no fake single-option selector, compact Android mobile purchase. */
.fixed-plan{font-size:16px!important;grid-column:1/-1;margin:0!important;padding:12px 0;color:var(--ink)!important}.fixed-plan strong{font-size:24px;margin-left:8px}.sku-options button span:only-child{font-size:20px;font-weight:600}.dock-fit[hidden]{display:none!important}
@media(max-width:420px){
.android-product .fit-note{margin-top:8px;margin-bottom:12px;padding:10px 12px;font-size:11px;line-height:1.65}.android-product main>h2,.android-product main>.page-label{margin:10px 20px;font-size:12px}
.android-product .phero .buyhero{padding-top:20px;gap:16px}.android-product .buyhero>div>.product-icon{width:32px;height:32px;margin-bottom:8px}.android-product .buyhero>div>.eyebrow{margin-bottom:8px}.android-product .buyhero h1{font-size:30px;line-height:1.25}.android-product .buyhero .lede{font-size:13px;line-height:1.65;margin-top:12px}.android-product .purchase{padding:14px;margin-top:14px}.android-product .purchase-label{margin-bottom:8px}.android-product .sku-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.android-product .sku-options button{min-height:56px;padding:6px 3px;gap:1px}.android-product .sku-options button b{font-size:16px}.android-product .purchase-total{margin-top:12px;padding-top:10px}.android-product .purchase-total strong{font-size:30px}.android-product .purchase-cycle{margin:6px 0 10px!important}.android-product .purchase .purchase-consult{padding:10px 8px}.android-product .purchase-trial{margin-top:8px!important;font-size:10px!important;line-height:1.65!important}.android-product .purchase-tools{margin-top:9px}.android-product .buyhero>div>.small{margin-top:10px}.android-product .hero-shot{margin-top:0}
}
@media(max-width:420px){.android-product .buyhero>div>.product-icon,.android-product .buyhero>div>.eyebrow{display:none}.android-product .buyhero h1{font-size:28px}.android-product .phero .buyhero{padding-top:16px}.android-product .purchase{margin-top:10px}}

/* ==========================================================================
   2026-11 calm-premium layer (preview).
   Own implementation. Visual direction studied from bencho.dev, transitions.dev,
   detentui.com and uiarc.dev (look & feel only; no third-party source copied).
   ========================================================================== */
:root {
  --canvas: #f6f5f1;
  --canvas-2: #efeee9;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --ink: #1b1b19;
  --soft: #3b3b38;
  --muted: #6b6a65;
  --faint: #8c8b85;
  --line: rgba(28, 27, 20, 0.08);
  --line-strong: rgba(28, 27, 20, 0.14);
  --band: #efeee9;
  --cobalt: #3d63f2;
  --link: #2f55e0;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 34px;
  --e-1: 0 1px 1px rgba(28, 27, 20, 0.03), 0 2px 6px -2px rgba(28, 27, 20, 0.05);
  --e-2: 0 1px 2px rgba(28, 27, 20, 0.04), 0 18px 40px -18px rgba(28, 27, 20, 0.16);
  --e-3: 0 1px 2px rgba(28, 27, 20, 0.05), 0 28px 60px -24px rgba(28, 27, 20, 0.24);
  --shadow: var(--e-2);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}
html { background: var(--canvas); }
body { background: var(--canvas); }
::selection { background: #dfe6ff; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }

/* Type: large, light-weight headlines with a calm gray second voice. */
h1, h2 { letter-spacing: -0.012em; }
h2 { font-weight: 600; }
.eyebrow { letter-spacing: 0.08em; color: var(--faint); }
.lede { color: var(--muted); }
.section-head p { color: var(--muted); }
.plain-link { color: var(--ink); text-decoration-color: var(--line-strong); transition: color .2s ease, text-decoration-color .2s ease; }
.plain-link:hover { color: var(--cobalt); text-decoration-color: currentColor; }
.plain-link .ki, .button .ki, .card-end .ki { transition: transform .25s var(--ease-out); }
.plain-link:hover .ki, .button:hover .ki, .service-card:hover .card-end .ki { transform: translate(2px, -2px); }

/* Buttons: compact pills, tactile press. */
.button {
  background: #1b1b19;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(28, 27, 20, 0.18);
  transition: background .2s ease, transform .18s var(--ease-out), box-shadow .2s ease;
}
.button:hover { background: #33332f; }
.button:active { transform: scale(0.97); }
.button.secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), var(--e-1); }
.button.secondary:hover { background: var(--surface-2); }
.text-button { transition: color .2s ease; }

/* Header: transparent at rest, floating blurred pill once you scroll. */
header {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header .nav {
  min-height: 56px;
  margin-block: 8px;
  padding-inline: 4px;
  border: 1px solid transparent;
  border-radius: 20px;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, padding .35s var(--ease-out);
}
html.is-scrolled header .nav {
  padding-inline: 14px;
  background: rgba(251, 250, 247, 0.78);
  border-color: var(--line);
  box-shadow: 0 10px 30px -18px rgba(28, 27, 20, 0.28);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
}
.brandmark { background: #1b1b19; border-radius: 12px; }
.brand-dot { background: var(--cobalt); box-shadow: 0 0 0 2px #1b1b19; }
#navigation a:not(.button) { position: relative; color: var(--muted); transition: color .2s ease; }
#navigation a:not(.button):hover { color: var(--ink); }
#navigation a[aria-current="page"]:not(.button) { color: var(--ink); box-shadow: none; }
#navigation a[aria-current="page"]:not(.button)::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.menu { background: var(--surface); border-color: var(--line-strong); }

/* Home hero: rounded shell with a soft Arc-like wash; phone stays portrait. */
.stage { color: var(--ink); background: transparent; overflow: visible; padding: 4px 0 0; }
.stage .hero {
  position: relative;
  isolation: isolate;
  width: min(1248px, calc(100% - 24px));
  padding: 72px max(40px, calc((min(1248px, 100vw - 24px) - 1120px) / 2)) 64px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(42% 60% at 86% 12%, rgba(150, 178, 255, 0.55), transparent 70%),
    radial-gradient(38% 55% at 6% 96%, rgba(255, 190, 170, 0.5), transparent 70%),
    radial-gradient(40% 50% at 60% 108%, rgba(255, 226, 150, 0.45), transparent 70%),
    radial-gradient(30% 40% at 30% 0%, rgba(190, 236, 210, 0.45), transparent 70%),
    var(--surface-2);
}
.stage .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(28, 27, 20, 0.07) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 72% 45%, #000 0%, transparent 75%);
}
.kicker-brand { color: var(--faint); }
.kicker-words { color: var(--ink); }
.kicker-words span + span::before { background: var(--line-strong); }
.stage h1 { color: var(--ink); font-weight: 600; }
.stage .lede { color: var(--muted); }
.stage .hero-prices { padding: 14px 18px; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-m); background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.stage .hero-prices > div + div { box-shadow: inset 1px 0 0 var(--line); }
.stage .hero-prices dt { color: var(--muted); }
.stage .hero-prices dd { color: var(--ink); }
.stage .hero-prices dd small { color: var(--muted); }
.stage .button { background: #1b1b19; color: #fff; }
.stage .button:hover { background: #33332f; color: #fff; }
.stage .button.secondary { background: rgba(255, 255, 255, 0.8); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), var(--e-1); }
.stage .button.secondary:hover { background: #fff; color: var(--ink); }
.stage .hero-contact { color: var(--muted); }
.stage .hero-contact strong, .stage .hero-contact a { color: var(--ink); }
.stage .hero-contact a { text-decoration-color: var(--line-strong); }
.stage .hero-image figcaption, .stage .map-credit { color: var(--muted); }
.stage .hero-image figcaption a, .stage .map-credit a { color: var(--soft); }
.stage .hero-image { position: relative; }
.stage .hero-image::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 46%;
  width: 135%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%);
}
.stage .hero-image img.home-shot {
  border-radius: 42px;
  box-shadow: 0 0 0 1px rgba(28, 27, 20, 0.08), 0 2px 4px rgba(28, 27, 20, 0.06), 0 40px 80px -30px rgba(28, 27, 20, 0.45);
}
.stage + .value-strip { margin-top: 20px; }

/* Value strip / benefits: three quiet pills. */
.value-strip, .benefits { gap: 10px; border: 0; margin-top: 20px; }
.value-strip span, .benefits span, .value-strip span + span, .benefits span + span {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: none;
  text-align: center;
  color: var(--soft);
}

/* Cards: Detent-style card-in-card. */
.service-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--e-1);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
}
a.service-card:hover, .service-card:not(.spec-card):hover { transform: translateY(-4px); box-shadow: var(--e-3); border-color: var(--line-strong); }
a.service-card:active { transform: translateY(-1px) scale(0.99); transition-duration: .15s; }
.card-scene { margin: 8px 8px 0; border-radius: 20px; height: 232px; isolation: isolate; }
.card-scene::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(28, 27, 20, 0.05); pointer-events: none; }
.card-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 70%); }
.card-scene img {
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 0 1px rgba(28, 27, 20, 0.06), 0 22px 44px -18px rgba(28, 27, 20, 0.35);
  transition: transform .6s var(--ease-out);
}
.scene-card:hover .card-scene img { transform: translateX(-50%) translateY(-6px) scale(1.03); }
.spec-card:hover .card-scene img { transform: translateX(-50%); }
.card-body { padding: 0 24px 22px; }
.service-card .eyebrow { letter-spacing: 0.08em; }
.service-card h3 { letter-spacing: -0.01em; }
.service-card .price { font-size: 32px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.service-card .price small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.shelf-periods span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.service-card .card-end { display: inline-flex; align-items: center; gap: 6px; width: max-content; margin-top: auto; padding: 8px 14px; border-radius: 999px; background: var(--canvas); color: var(--ink); transition: background .25s ease; }
.service-card:hover .card-end { background: var(--canvas-2); }

/* Sections. */
.usecases { background: transparent; }
.usecases > .container {
  padding: 56px clamp(20px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(150, 178, 255, 0.22), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(190, 236, 210, 0.3), transparent 70%),
    var(--surface-2);
}
.usecase-grid article { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--e-1); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.usecase-grid article:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
.support-section { background: transparent; }
.support-section > .container { padding: 56px clamp(20px, 4vw, 48px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.steps li { border-color: var(--line); }
.steps li > span { color: var(--cobalt); font-variant-numeric: tabular-nums; }
.guide-row { border-color: var(--line); border-radius: 16px; padding-inline: 14px; transition: background .25s ease; }
.guide-row:hover { background: rgba(255, 255, 255, 0.75); }
.guide-row b { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); transition: transform .3s var(--ease-out), background .25s ease; }
.guide-row:hover b { transform: translateX(3px); background: #fff; }

/* CTA banner: Arc-style pastel container with a dark pill. */
.contact-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  color: var(--ink);
  background:
    radial-gradient(55% 90% at 100% 0%, rgba(150, 178, 255, 0.55), transparent 70%),
    radial-gradient(50% 90% at 0% 100%, rgba(255, 190, 170, 0.5), transparent 70%),
    radial-gradient(45% 70% at 55% 120%, rgba(255, 226, 150, 0.55), transparent 70%),
    var(--surface-2);
}
.contact-banner .eyebrow { color: var(--faint); }
.contact-banner h2 { color: var(--ink); }
.contact-banner p { color: var(--muted); }
.contact-banner .button { background: #1b1b19; color: #fff; }
.contact-banner .button:hover { background: #33332f; color: #fff; }

/* Product heroes: same rounded shell, tinted per product. */
.phero { width: min(1248px, calc(100% - 24px)); margin: 8px auto 0; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.fit-note { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); border-radius: var(--r-m); }
.buyhero figure.hero-shot img { border-radius: 36px; box-shadow: 0 0 0 1px rgba(28, 27, 20, 0.08), 0 40px 80px -30px rgba(28, 27, 20, 0.4); }
.story-art { border-radius: var(--r-xl); }
.story-art img { box-shadow: 0 0 0 1px rgba(28, 27, 20, 0.06), 0 30px 60px -28px rgba(16, 60, 40, 0.4); }
.feature-art, .howto li, .plan-cards li, .offer, .package, .finder, .assure, .compat-grid > div { border-color: var(--line); }
.howto li, .plan-cards li, .finder { box-shadow: var(--e-1); border-radius: 22px; }
.assure { background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--r-l); }
.tint { width: min(1248px, calc(100% - 24px)); margin-inline: auto; border-radius: var(--r-xl); border: 1px solid var(--line); }
.plan-cards li { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.plan-cards li:hover { transform: translateY(-3px); box-shadow: var(--e-2); }

/* Purchase box + segmented SKU picker. */
.purchase {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--e-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.spec-card .purchase { background: var(--surface-2); box-shadow: none; }
.purchase-label { color: var(--soft); letter-spacing: 0.02em; }
.sku-options {
  position: relative;
  isolation: isolate;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(28, 27, 20, 0.045);
  box-shadow: inset 0 0 0 1px rgba(28, 27, 20, 0.04);
}
.sku-options:has(> .fixed-plan) { padding: 4px 14px; }
.sku-options button {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  transition: color .25s ease, background .25s ease, transform .18s var(--ease-out);
}
.sku-options button:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.sku-options button:active { transform: scale(0.96); }
.sku-options button b { color: var(--soft); transition: color .25s ease; }
.sku-options button[aria-pressed=true] { border: 0; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(28, 27, 20, 0.08), 0 4px 12px -4px rgba(28, 27, 20, 0.18); }
.sku-options button[aria-pressed=true] b { color: var(--ink); }
.sku-options.has-thumb button[aria-pressed=true] { background: transparent; box-shadow: none; }
.sku-thumb {
  position: absolute;
  z-index: 0;
  top: 0; left: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(28, 27, 20, 0.08), 0 6px 16px -6px rgba(28, 27, 20, 0.22);
  pointer-events: none;
  transition: transform .45s var(--ease-spring), width .45s var(--ease-out), height .45s var(--ease-out);
}
.sku-thumb.no-anim { transition: none; }
.purchase-total { border-top: 1px dashed var(--line-strong); }
.purchase-total > span { color: var(--muted); }
.purchase-total strong { display: inline-flex; overflow: hidden; padding: 0 2px; margin-right: -2px; letter-spacing: -0.03em; }
.purchase-total strong .tick { display: inline-block; white-space: pre; }
.purchase-total strong.is-up .tick { animation: tick-up .55s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
.purchase-total strong.is-down .tick { animation: tick-down .55s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes tick-up { from { transform: translateY(70%); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: blur(0); } }
@keyframes tick-down { from { transform: translateY(-70%); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: blur(0); } }
.purchase-cycle.is-swap { animation: soft-in .4s ease both; }
@keyframes soft-in { from { opacity: 0.2; } to { opacity: 1; } }
.purchase-cycle { color: var(--muted) !important; }
.purchase-tools, .purchase-trial { color: var(--muted) !important; }
.purchase-feedback { color: var(--cobalt) !important; }
.purchase .purchase-consult { border-radius: 16px; }
.purchase [data-consult]:focus-visible, .sku-options button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* Forms (contact) — calmer fields, soft focus halo. */
input, select, textarea { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, select:focus, textarea:focus { border-color: rgba(61, 99, 242, 0.55); box-shadow: 0 0 0 4px rgba(61, 99, 242, 0.12); outline: none; }
.contact-layout #inquiry, .check #inquiry { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--e-2); }
.contact-side { border-color: var(--line); }
.contact-id { border-radius: var(--r-m); }
pre { border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); }

/* Footer. */
.site-footer { border-top: 1px solid var(--line); }

/* Mobile dock: a floating pill. */
@media (max-width: 768px) {
  .dock {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(251, 250, 247, 0.82);
    backdrop-filter: saturate(1.5) blur(18px);
    -webkit-backdrop-filter: saturate(1.5) blur(18px);
    box-shadow: 0 18px 40px -16px rgba(28, 27, 20, 0.35);
    transition: transform .45s var(--ease-out), opacity .3s ease;
  }
  .dock button, .dock a { border-color: var(--line-strong); }
  .dock-copy { background: #1b1b19; border-color: #1b1b19; }
  .dock.dock-away { transform: translateY(calc(100% + 32px)); opacity: 0; }
  body:has(.dock) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) {
  .stage .hero { padding: 48px 32px 56px; }
}
@media (max-width: 760px) {
  .stage .hero { width: calc(100% - 16px); padding: 32px 20px 44px; border-radius: 28px; }
  .stage .hero-prices { width: 100%; padding: 12px 14px; }
  .phero { width: calc(100% - 16px); border-radius: 28px; }
  .phero > .container { width: calc(100% - 32px); }
  .tint { width: calc(100% - 16px); border-radius: 28px; }
  .usecases > .container, .support-section > .container { width: calc(100% - 16px); padding: 36px 18px; border-radius: 28px; }
  .value-strip, .benefits { gap: 8px; }
  .value-strip span, .benefits span, .value-strip span + span, .benefits span + span { padding: 10px 12px; font-size: 13px; }
  .card-scene { height: 206px; }
  .contact-banner { border-radius: 28px; }
}
@media (max-width: 560px) {
  .value-strip span, .benefits span, .value-strip span + span, .benefits span + span { text-align: left; border-radius: 16px; }
}

/* Scroll reveal (added by app.js only when motion is allowed). */
html.reveal-on .rv { transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); transition-delay: var(--rv-d, 0ms); }
html.reveal-on .rv:not(.in) { opacity: 0; translate: 0 22px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  html.reveal-on .rv:not(.in) { opacity: 1; translate: none; filter: none; }
}

/* Layer fixes after first visual pass. */
.service-card .price { margin-bottom: 18px; }
.service-card .price + .shelf-periods { margin-top: -6px; }
.usecases, .support-section { padding: 40px 0; }
.guide-row { border-radius: 0; }
.spec-card .purchase[data-product="iphone"] .sku-options { grid-template-columns: 1fr; }
.sku-options:not(:has(button)) { background: transparent; box-shadow: none; border: 1px dashed var(--line-strong); justify-items: center; text-align: center; align-content: center; }
.sku-options:not(:has(button)) .fixed-plan { text-align: center; }
@media (max-width: 420px) {
  .stage .hero-copy h1 { font-size: clamp(28px, 8vw, 32px); }
}
.contact-layout #inquiry { margin-top: 16px; padding: 28px; }
.contact-side { border: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 640px) { .contact-layout #inquiry { padding: 20px 18px; } }
.purchase[data-product="iphone"] .sku-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-card .purchase[data-product="iphone"] .sku-options { grid-template-columns: 1fr; }
@media (max-width: 600px) { .spec-card .purchase[data-product="iphone"] .sku-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.process-grid article { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-1); }
html.is-scrolled header { background: linear-gradient(180deg, rgba(246, 245, 241, 0.92) 0%, rgba(246, 245, 241, 0.6) 55%, rgba(246, 245, 241, 0) 100%); }
@media (max-width: 880px) {
  #navigation a[aria-current="page"]:not(.button)::after { display: none; }
  #navigation a[aria-current="page"]:not(.button) { font-weight: 650; color: var(--ink); }
}

/* ==========================================================================
   v2 — one system for every page (preview, 2026-11-10).
   Own implementation; look studied from bencho.dev / transitions.dev /
   detentui.com / uiarc.dev. No third-party source copied.
   Neutral chrome, charcoal type, one cobalt accent; screenshots carry color.
   ========================================================================== */
:root {
  --canvas: #fafaf8;
  --surface: #ffffff;
  --surface-2: #f7f6f3;
  --well: #f2f1ed;
  --ink: #161615;
  --soft: #3d3d3a;
  --muted: #6f6e69;
  --faint: #9a9993;
  --sub: #a8a7a1;
  --line: rgba(22, 22, 21, 0.07);
  --line-strong: rgba(22, 22, 21, 0.12);
  --cobalt: #3a5cf0;
  --link: #3a5cf0;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --stage-bg:
    radial-gradient(70% 55% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(45% 45% at 88% 92%, rgba(58, 92, 240, 0.07), rgba(58, 92, 240, 0) 72%),
    radial-gradient(40% 40% at 10% 85%, rgba(22, 22, 21, 0.035), rgba(22, 22, 21, 0) 72%),
    #f1f0ec;
  --r-card: 30px;
  --r-stage: 40px;
}
html, body { background: var(--canvas); }
body { font-size: 16px; line-height: 1.75; color: var(--ink); }

/* Type ------------------------------------------------------------------ */
#main h1, #main h2, #main h3 { color: var(--ink); text-wrap: balance; }
#main h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 500; line-height: 1.08; letter-spacing: -0.04em; }
#main h2 { font-size: clamp(32px, 4.2vw, 60px); font-weight: 500; line-height: 1.12; letter-spacing: -0.032em; max-width: none; }
#main h3 { font-weight: 500; letter-spacing: -0.012em; }
#main .h-sub { color: var(--sub); }
#main .eyebrow, .eyebrow {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint) !important;
}
#main .lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.75; color: var(--muted); max-width: 34em; }
#main p { color: inherit; }
#main strong, #main b { font-weight: 600; }
.plain-link { font-weight: 500; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.plain-link:hover { color: var(--cobalt); border-color: currentColor; }

/* Buttons --------------------------------------------------------------- */
.button { min-height: 48px; padding: 0 24px; font-weight: 500; letter-spacing: 0; background: var(--ink); }
.button.compact { min-height: 38px; padding: 0 16px; }
.button.secondary, .stage .button.secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Navigation: brand, a floating pill of links, dark CTA ---------------- */
header .nav, html.is-scrolled header .nav { min-height: 64px; margin-block: 6px; padding-inline: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.is-scrolled header { background: linear-gradient(180deg, rgba(250, 250, 248, 0.94) 0%, rgba(250, 250, 248, 0.7) 60%, rgba(250, 250, 248, 0) 100%); }
.brand { font-weight: 600; }
.brand small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--faint); }
.brandmark { border-radius: 11px; }
@media (min-width: 881px) {
  #navigation {
    gap: 2px;
    padding: 5px 5px 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 2px rgba(22, 22, 21, 0.03), 0 12px 32px -20px rgba(22, 22, 21, 0.3);
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
  }
  #navigation a:not(.button) { padding: 7px 14px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: background .2s ease, color .2s ease; }
  #navigation a:not(.button):hover { background: var(--well); color: var(--ink); }
  #navigation a[aria-current="page"]:not(.button) { background: var(--well); color: var(--ink); }
  #navigation a[aria-current="page"]:not(.button)::after { display: none; }
  #navigation .button { margin-left: 6px; min-height: 36px; }
}
@media (max-width: 880px) {
  #navigation { border-radius: 24px !important; box-shadow: 0 24px 50px -24px rgba(22, 22, 21, 0.35) !important; }
  .menu { min-height: 40px; padding: 0 16px; font-weight: 500; }
}

/* Section rhythm --------------------------------------------------------- */
/* Round 7: 宽屏节奏收紧（原 120px，两段相接处出现 240px 纯黑带） */
#main section { padding-block: 64px; }
#main section.first-section { padding-top: 24px; }
#main section:has(> .contact-banner) { padding-block: 40px; }
.section-head { align-items: end; margin-bottom: 48px; }
.section-head p { max-width: 26em; font-size: 15px; color: var(--muted); }
.section-head.x-center { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.section-head.x-center > div { display: flex; flex-direction: column; align-items: center; }

/* Page hero for every inner page: centered editorial ------------------- */
#main .pagehero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 96px 0 72px;
}
#main .pagehero h1 { max-width: 14em; margin-inline: auto; }
#main .pagehero .lede { margin: 26px auto 0; text-align: center; }
#main .pagehero .actions, #main .container.actions { justify-content: center; }
#main .pagehero + .container.actions { margin: -24px auto 96px; }

/* HOME hero -------------------------------------------------------------- */
#main .x-hero { padding: 0; background: none; }
.x-hero-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 0 56px; }
.x-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 5px 14px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13.5px; color: var(--soft); box-shadow: 0 1px 2px rgba(22, 22, 21, 0.04); }
.x-badge span { padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; }
.x-hero .hero-kicker { flex-direction: row; align-items: center; justify-content: center; gap: 16px; margin: 0 0 22px; }
.x-hero .kicker-brand { display: none; }
.x-hero .kicker-words { font-size: clamp(22px, 2vw, 28px); color: var(--muted); letter-spacing: 0.22em; }
.x-hero .kicker-words span + span::before { background: var(--line-strong); }
#main .x-hero h1 { font-size: clamp(46px, 7.2vw, 104px); max-width: 11em; }
#main .x-hero .lede { margin: 28px auto 0; max-width: 32em; text-align: center; }
.x-hero .actions { justify-content: center; margin-top: 36px; }
.x-hero .hero-contact { justify-content: center; margin-top: 22px; font-size: 14px; color: var(--muted); }
.x-hero .hero-contact strong, .x-hero .hero-contact a { color: var(--ink); }

.x-stage-wrap { width: min(1280px, calc(100% - 24px)); margin: 0 auto; }
.x-stage {
  position: relative;
  height: clamp(560px, 50vw, 700px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--r-stage);
  background: var(--stage-bg);
}
.x-orbit {
  position: absolute; inset: 0; z-index: -1;
  background: repeating-radial-gradient(circle at 50% 46%, rgba(22, 22, 21, 0) 0 119px, rgba(22, 22, 21, 0.055) 120px 121px);
  -webkit-mask-image: radial-gradient(52% 70% at 50% 46%, #000 35%, transparent 75%);
  mask-image: radial-gradient(52% 70% at 50% 46%, #000 35%, transparent 75%);
}
.x-stage .hero-image { position: absolute; inset: 0; z-index: 1; width: auto !important; max-width: none !important; margin: 0; pointer-events: none; }
.x-stage .hero-image::before { display: none; }
.x-stage .hero-image img.home-shot {
  position: absolute; left: 50%; top: 56px;
  width: clamp(250px, 24vw, 320px) !important; height: auto;
  transform: translateX(-50%);
  border-radius: 46px;
  box-shadow: 0 0 0 1px rgba(22, 22, 21, 0.08), 0 50px 90px -40px rgba(22, 22, 21, 0.55), 0 24px 40px -30px rgba(22, 22, 21, 0.3);
}
.x-stage .hero-image figcaption { position: absolute; left: 28px; bottom: 22px; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint) !important; }
.x-stage .hero-image .map-credit { position: absolute; right: 28px; bottom: 22px; margin: 0; font-size: 11px; color: var(--faint) !important; pointer-events: auto; }
.x-stage .hero-image .map-credit a { color: var(--muted) !important; }
.x-float {
  position: absolute; z-index: 2;
  display: block; width: clamp(200px, 20vw, 270px); padding: 8px;
  border: 1px solid var(--line); border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(22, 22, 21, 0.04), 0 40px 70px -36px rgba(22, 22, 21, 0.45);
  color: var(--ink);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.x-float:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(22, 22, 21, 0.04), 0 50px 80px -36px rgba(22, 22, 21, 0.5); }
.x-float:active { transform: translateY(-2px) scale(0.985); }
.x-float--left { left: 7%; top: 128px; }
.x-float--right { right: 7%; top: 236px; }
.x-float-top { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; font-size: 14px; }
.x-float-top img { width: 26px; height: 26px; }
.x-float-top b { font-weight: 500; }
.x-float-top em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.x-float-art { display: block; aspect-ratio: 4 / 3.2; overflow: hidden; border-radius: 19px; background: var(--well); }
.x-float-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.x-float-art--multi img { object-position: 50% 52%; }
.x-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px -24px rgba(22, 22, 21, 0.4);
  font-size: 13px; color: var(--soft); white-space: nowrap;
}
.x-chip img { width: 26px; height: 26px; border-radius: 8px; }
.x-chip .ki { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-grid; place-items: center; }
.x-chip--a { left: 13%; bottom: 84px; }
.x-chip--b { right: 12%; top: 92px; padding-left: 10px; }
.x-chip--b .ki { width: auto; height: auto; background: none; color: var(--cobalt); }

.x-price-row { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 56px 0 0; }
.x-hero .hero-prices, .x-price-row .hero-prices {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  width: min(760px, 100%); max-width: none; margin: 0; padding: 0;
  border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.x-price-row .hero-prices > div, .x-price-row .hero-prices > div + div { padding: 4px 12px; text-align: center; box-shadow: none; }
.x-price-row .hero-prices > div + div { border-left: 1px solid var(--line-strong); }
.x-price-row .hero-prices dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--faint); }
.x-price-row .hero-prices dd { margin-top: 8px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.x-price-row .hero-prices dd small { font-size: 14px; color: var(--muted); letter-spacing: 0; }
.x-price-row .value-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; width: auto; margin: 0; border: 0; }
.x-price-row .value-strip span, .x-price-row .value-strip span + span { padding: 0; border: 0; background: none; box-shadow: none; font-size: 14px; color: var(--muted); }

/* Bento cards (shelf + services) --------------------------------------- */
.service-grid.x-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.x-bento .x-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.x-bento .x-wide .card-scene { order: 2; height: auto; min-height: 400px; margin: 8px 8px 8px 0; }
.x-bento .x-wide .card-body { justify-content: center; padding: 40px 36px; }
#main .service-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(22, 22, 21, 0.03);
}
#main a.service-card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(22, 22, 21, 0.03), 0 40px 70px -40px rgba(22, 22, 21, 0.35); }
#main .card-scene, #main .scene-card.green .card-scene, #main .scene-card.blue .card-scene, #main .scene-card.pink .card-scene, #main .scene-card.orange .card-scene {
  height: 300px; margin: 8px 8px 0; border-radius: 24px; background: var(--stage-bg);
}
#main .card-scene::before { background: repeating-radial-gradient(circle at 50% 120%, rgba(22, 22, 21, 0) 0 79px, rgba(22, 22, 21, 0.04) 80px 81px); }
#main .card-scene img {
  top: 40px; width: 54%; height: calc(100% - 40px);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 0 0 7px #161615, 0 0 0 8px rgba(255, 255, 255, 0.25), 0 40px 60px -30px rgba(22, 22, 21, 0.5);
}
#main .x-wide .card-scene img { width: 44%; max-width: 280px; }
#main .card-scene img.x-phone { height: auto; object-fit: contain; top: 44px; width: 52%; max-width: 270px; border-radius: 38px; box-shadow: 0 0 0 1px rgba(22, 22, 21, 0.08), 0 40px 60px -30px rgba(22, 22, 21, 0.5); }
#main .scene-card:hover .card-scene img { transform: translateX(-50%) translateY(-10px); }
#main .spec-card:hover .card-scene img { transform: translateX(-50%); }
#main .card-body { padding: 28px 28px 28px; }
#main .card-body .product-icon { display: none; }
#main .service-card .eyebrow { margin-bottom: 12px; }
#main .service-card h3 { display: flex; justify-content: space-between; align-items: center; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.025em; }
#main .service-card h3 > span { display: none; }
#main .service-card p { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--muted); }
#main .service-card .price { margin: 26px 0 14px; font-size: clamp(34px, 3.4vw, 46px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); }
#main .service-card .price small { font-size: 15px; letter-spacing: 0; color: var(--muted); font-weight: 400; }
#main .shelf-periods { margin: 0 0 26px; gap: 6px; }
#main .shelf-periods span { padding: 5px 12px; border: 0; border-radius: 999px; background: var(--well); font-size: 12.5px; color: var(--soft); }
#main .service-card .card-end { align-self: flex-start; margin-top: auto; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500; }
#main .service-card:hover .card-end { background: #33332f; }

/* Services spec cards: 2-up bento */
#main .first-section > .service-grid:not(.x-bento) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#main .spec-card .purchase { margin-top: 24px; padding: 18px; border: 0; border-radius: 22px; background: var(--surface-2); box-shadow: none; }
#main .spec-card .card-scene { height: 280px; }

/* Purchase / SKU -------------------------------------------------------- */
#main .purchase { max-width: 500px; padding: 24px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 2px rgba(22, 22, 21, 0.04), 0 50px 90px -50px rgba(22, 22, 21, 0.45); }
#main .purchase-label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--faint); margin-bottom: 14px; }
#main .sku-options { padding: 5px; gap: 4px; border-radius: 18px; background: var(--well); box-shadow: none; }
#main .sku-options button { min-height: 68px; border-radius: 14px; }
#main .sku-options button span { font-size: 12.5px; }
#main .sku-options button b { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
#main .sku-thumb { border-radius: 14px; }
#main .purchase-total { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); align-items: flex-end; }
#main .purchase-total > span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--faint); }
#main .purchase-total strong { font-size: clamp(44px, 4.6vw, 60px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
#main .purchase .purchase-consult { min-height: 54px; margin-top: 4px; border-radius: 999px; font-size: 15px; font-weight: 500; }
#main .purchase-tools { font-size: 12.5px; }
#main .purchase-trial { font-size: 12px !important; line-height: 1.8 !important; }
#main .fixed-plan strong { font-weight: 500; font-size: 26px; }

/* Product hero (android / iphone / multi / network) ------------------- */
#main .phero.p2 { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.p2-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 0 52px; }
.p2-head .product-icon { display: none; }
.p2-head .notice { order: -1; margin: 0 0 18px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--soft); }
#main .p2-head h1 { max-width: 12em; }
#main .p2-head .lede { margin: 24px auto 0; text-align: center; }
#main .p2-head .fit-note { width: auto; max-width: 62em; margin: 26px auto 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.6; color: var(--soft); }
#main .p2-head .fit-note span { display: inline; margin: 0 0 0 10px; font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.p2-stage-wrap { width: min(1280px, calc(100% - 24px)); margin: 0 auto; }
.p2-stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 48px;
  padding: 64px clamp(28px, 6vw, 100px);
  border: 1px solid var(--line); border-radius: var(--r-stage);
  background: var(--stage-bg);
}
.p2-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 74% 50%, rgba(22, 22, 21, 0) 0 119px, rgba(22, 22, 21, 0.05) 120px 121px); -webkit-mask-image: radial-gradient(45% 70% at 74% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(45% 70% at 74% 50%, #000 30%, transparent 75%); }
.p2-buy { min-width: 0; }
.p2-buy > .small { margin-top: 16px; font-size: 14px; color: var(--muted); }
#main .p2-stage .hero-shot { justify-self: center; width: 100%; max-width: 440px; margin: 0; }
#main .p2-stage .p2-phone { max-width: 320px; }
#main .p2-stage .p2-phone img { width: 100%; height: auto; border-radius: 46px; box-shadow: 0 0 0 1px rgba(22, 22, 21, 0.08), 0 60px 90px -44px rgba(22, 22, 21, 0.55); }
#main .p2-stage .p2-card { padding: 8px; border: 1px solid var(--line); border-radius: 30px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 60px 90px -50px rgba(22, 22, 21, 0.5); }
#main .p2-stage .p2-card img { display: block; width: 100%; height: auto; border-radius: 23px; box-shadow: none; }
#main .p2-stage figcaption { margin-top: 14px; justify-content: center; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--faint); }
#main .p2-stage .p2-card figcaption { margin: 10px 0 4px; }
#main .p2-stage figcaption a { color: var(--muted); }

/* Strips under heroes */
#main .benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 40px auto 0; border: 0; }
#main .benefits span, #main .benefits span + span { padding: 0; border: 0; background: none; box-shadow: none; font-size: 14px; color: var(--muted); }
#main .benefits span::before { content: "✓"; margin-right: 8px; color: var(--cobalt); }

/* Feature stories & bento grids --------------------------------------- */
#main .stories { gap: 20px; margin-top: 56px; }
#main .story { gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
#main .story-art { margin: 8px; padding: clamp(20px, 3vw, 44px); border-radius: 24px; background: var(--stage-bg); }
#main .story-art img { border-radius: 22px; box-shadow: 0 0 0 1px rgba(22, 22, 21, 0.06), 0 40px 70px -40px rgba(22, 22, 21, 0.5); }
#main .story-art figcaption { font-family: var(--mono); font-size: 11px; color: var(--faint); }
#main .story-copy { padding: clamp(24px, 4vw, 56px); }
#main .story-copy h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -0.03em; }
#main .story-copy p { color: var(--muted); font-size: 16px; }
#main .story-copy small { color: var(--ink); font-weight: 500; }
#main .more-head h3 { font-size: 26px; }
#main .more-grid article, #main #features .feature-grid article, #main #scope .feature-grid article, #main .process-grid article, #main .usecase-grid article, #main .howto li, #main .plan-cards li {
  padding: 10px 10px 24px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: none;
}
#main .more-grid article > :not(figure), #main .feature-grid article > :not(figure) { padding-inline: 14px; }
#main .feature-art { border: 0; border-radius: 18px; background: var(--stage-bg); overflow: hidden; }
#main .feature-art img { border-radius: 18px; }
#main .process-grid article, #main .usecase-grid article { padding: 30px 28px; }
#main .process-grid { gap: 16px; }
#main .process-grid h2 { font-size: 22px; letter-spacing: -0.015em; }
#main .stage-no, #main .steps li > span { font-family: var(--mono); color: var(--cobalt); }

/* Neutralise every tinted band and box */
#main .tint, #main .flow, #main .usecases, #main .support-section, #main .check { width: auto; margin: 0; border: 0; border-radius: 0; background: none !important; }
#main .usecases > .container, #main .support-section > .container { padding: 0; border: 0; background: none; }
#main .assure, body #main .assure { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stage-bg) !important; }
#main .assure h2 { font-size: clamp(26px, 2.6vw, 36px); }
#main .assure li::before { color: var(--cobalt); }
#main .flow > .container > ol { gap: 16px; }
#main .flow > .container > ol > li { padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); }
#main .flow > .container > ol > li::before { font-family: var(--mono); color: var(--cobalt); }
#main .compat-grid > div { border: 0; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
#main .compat-grid dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--faint); }
#main .notice:not(.p2-head .notice) { border: 0; background: none; }

/* FAQ: clean list */
#main .faq details { padding: 22px 0; border-color: var(--line); }
#main .faq summary { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
#main .faq details p { color: var(--muted); }

/* Guides list + reading pages ------------------------------------------ */
#main .guide-row { grid-template-columns: 8.5rem minmax(0, 1fr) auto; padding: 26px 8px; border-color: var(--line); }
#main .guide-row > span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--faint); }
#main .guide-row h3 { font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -0.02em; }
#main .guide-row p { color: var(--muted); }
#main .guide-row b { width: 40px; height: 40px; border: 0; background: var(--well); }
#main a.guide-row:hover b, #main .guide-row:hover b { background: var(--ink); color: #fff; }
#main #guide-search { max-width: 720px; min-height: 52px; margin-inline: auto; border-radius: 999px; padding-inline: 22px; }
#main section.reading article, #main section.reading .reading-meta, #main section.reading > .plain-link, #main section.reading .vps-table-wrap { max-width: 720px; margin-inline: auto; }
#main section.reading:has(.reading-meta):not(:has(table)), #main section.reading:not(:has(.reading-meta)), #main section.reading:has(table) { display: block; }
#main section.reading article { padding: 0; margin-top: 56px; border: 0; background: none; }
#main section.reading article h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.025em; }
#main section.reading article p, #main section.reading li { font-size: 17px; line-height: 1.9; color: var(--soft); }
#main section.reading .reading-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
#main .vps-table-wrap, #main .policy-wrap { border: 1px solid var(--line); border-radius: 24px; background: var(--surface); overflow: auto; }
#main .vps-table th, #main .vps-table td, #main .policy-table th, #main .policy-table td { border-color: var(--line); }
#main .vps-table thead th, #main .policy-table thead th { background: var(--surface-2); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; font-weight: 500; color: var(--faint); }
#main .facts { gap: 16px; }
#main .facts > div { padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }

/* Split copy + CTA banner ---------------------------------------------- */
#main .split-copy h2 { font-size: clamp(30px, 3.6vw, 52px); }
#main .contact-banner {
  padding: clamp(40px, 6vw, 88px) clamp(28px, 6vw, 88px);
  grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 32px;
  border: 1px solid var(--line); border-radius: var(--r-stage);
  background: var(--stage-bg);
}
#main .contact-banner > div { display: flex; flex-direction: column; align-items: center; }
#main .contact-banner h2 { font-size: clamp(34px, 4.6vw, 64px); max-width: 12em; }
#main .contact-banner p { margin-top: 16px; color: var(--muted); }
#main .contact-banner .button { min-height: 52px; padding: 0 28px; }

/* Contact & forms -------------------------------------------------------- */
#main .contact-layout { gap: 20px; }
#main .contact-layout > div > h2 { font-size: clamp(26px, 2.6vw, 36px); }
#main .contact-layout #inquiry { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 50px 90px -60px rgba(22, 22, 21, 0.4); }
#main .contact-side { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stage-bg); }
#main .contact-id { border: 0; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(22, 22, 21, 0.04); }
#main label { font-size: 13px; font-weight: 500; color: var(--soft); }
#main input, #main select, #main textarea { min-height: 50px; border: 0; border-radius: 14px; background: var(--well); box-shadow: inset 0 0 0 1px transparent; }
#main input:focus, #main select:focus, #main textarea:focus { background: var(--surface); box-shadow: 0 0 0 1px rgba(58, 92, 240, 0.5), 0 0 0 5px rgba(58, 92, 240, 0.1); }
#main .finder { padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }

/* Footer --------------------------------------------------------------- */
.site-footer { margin-top: 40px; padding-top: 48px; border-top: 1px solid var(--line); }
.site-footer .brand { font-size: 20px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .x-float--left { left: 3%; }
  .x-float--right { right: 3%; }
  .x-chip--a { left: 5%; }
  .x-chip--b { right: 5%; }
  .service-grid.x-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-bento .x-wide { grid-column: span 2; }
}
@media (max-width: 900px) {
  .p2-stage { grid-template-columns: 1fr; gap: 36px; padding: 28px 20px 36px; }
  #main .p2-buy .purchase { max-width: none; }
}
@media (max-width: 760px) {
  #main section { padding-block: 80px; }
  #main h1 { font-size: clamp(38px, 10.6vw, 48px); line-height: 1.12; letter-spacing: -0.035em; }
  #main h2 { font-size: clamp(30px, 8.4vw, 38px); line-height: 1.16; }
  #main .x-hero h1 { font-size: clamp(40px, 11.4vw, 50px); }
  .x-hero-head { padding: 36px 0 36px; }
  .x-badge { margin-bottom: 22px; font-size: 12.5px; }
  .x-hero .hero-kicker { margin-bottom: 16px; }
  .x-hero .kicker-words { font-size: 20px; }
  .x-hero .actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; }
  .x-hero .actions .button { width: 100%; min-height: 52px; }
  .x-stage-wrap, .p2-stage-wrap { width: calc(100% - 16px); }
  .x-stage { height: 560px; border-radius: 30px; }
  .x-stage .hero-image img.home-shot { width: 226px !important; top: 40px; border-radius: 36px; }
  .x-float { width: 168px; padding: 6px; border-radius: 20px; }
  .x-float-top { padding: 4px 6px 7px; font-size: 12.5px; gap: 6px; }
  .x-float-top img { width: 20px; height: 20px; }
  .x-float-top em { font-size: 10.5px; }
  .x-float-art { border-radius: 15px; }
  .x-float--left { left: 10px; top: 300px; }
  .x-float--right { right: 10px; top: 150px; }
  .x-chip--a { left: 12px; top: 84px; bottom: auto; font-size: 12px; }
  .x-chip--b { display: none; }
  .x-stage .hero-image figcaption { left: 18px; bottom: 14px; }
  .x-stage .hero-image .map-credit { right: 18px; bottom: 14px; }
  .x-price-row { padding-top: 40px; }
  .x-price-row .hero-prices > div, .x-price-row .hero-prices > div + div { padding: 2px 6px; }
  .x-price-row .hero-prices dd { font-size: 27px; }
  .x-price-row .hero-prices dd small { font-size: 11.5px; }
  .x-price-row .hero-prices dt { font-size: 10.5px; letter-spacing: 0.06em; }
  .service-grid.x-bento, #main .first-section > .service-grid:not(.x-bento) { grid-template-columns: 1fr; }
  .x-bento .x-wide { grid-column: auto; display: flex; flex-direction: column; }
  .x-bento .x-wide .card-scene { order: 0; min-height: 0; height: 280px; margin: 8px 8px 0; }
  .x-bento .x-wide .card-body { padding: 26px 22px 24px; }
  #main .card-scene { height: 270px; }
  #main .card-body { padding: 24px 22px; }
  #main .x-wide .card-scene img, #main .card-scene img { width: 56%; }
  #main .card-scene img.x-phone { width: 52%; }
  .p2-head { padding: 36px 0 32px; }
  #main .p2-head .fit-note { border-radius: 18px; text-align: left; }
  #main .p2-head .fit-note span { display: block; margin: 2px 0 0; }
  #main .pagehero { padding: 56px 0 44px; }
  #main .story, #main .story.flip { grid-template-columns: 1fr; }
  #main .contact-banner { border-radius: 30px; }
  #main .guide-row { grid-template-columns: minmax(0, 1fr) auto; }
  #main .guide-row > span { grid-column: 1 / -1; }
  #main .x-price-row .value-strip { flex-direction: column; align-items: center; gap: 6px; }
}
@media (max-width: 420px) {
  #main .purchase { padding: 16px; border-radius: 24px; }
  #main .purchase-total strong { font-size: 44px; }
  #main .sku-options button { min-height: 60px; }
}
.x-hero-head { padding: 44px 0 44px; }
#main .x-hero h1 { font-size: clamp(46px, 6.2vw, 88px); }
.x-badge { margin-bottom: 24px; }
.x-hero .actions { margin-top: 30px; }
@media (max-width: 760px) {
  #main .x-hero h1 { font-size: 9vw; }
  .x-hero-head { padding: 28px 0 32px; }
}
.x-stage .hero-image { justify-self: stretch !important; align-self: stretch !important; }
/* Shelf: 2×2 large live cards; screens keep their own 4:5 ratio and rise out of the stage. */
.service-grid.x-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.x-bento .x-wide { grid-column: auto; display: flex; flex-direction: column; }
#main .x-bento .x-wide .card-scene { order: 0; height: 340px; min-height: 0; margin: 8px 8px 0; }
#main .x-bento .x-wide .card-body { padding: 28px 30px 30px; justify-content: flex-start; }
#main .x-bento .card-scene { height: 340px; }
#main .card-scene img:not(.x-phone) { top: 44px; width: 46%; max-width: 280px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
#main .x-wide .card-scene img:not(.x-phone) { width: 46%; }
#main .card-scene img.x-phone { width: 44%; max-width: 250px; }
@media (max-width: 760px) {
  .service-grid.x-bento { grid-template-columns: 1fr; }
  #main .x-bento .card-scene, #main .x-bento .x-wide .card-scene, #main .card-scene { height: 280px; }
  #main .card-scene img:not(.x-phone), #main .x-wide .card-scene img:not(.x-phone) { width: 58%; }
  #main .card-scene img.x-phone { width: 54%; }
}

/* --------------------------------------------------------------------------
   Ported free components (MIT). Rewritten from React/CSS-modules to plain CSS.
   Arc UI — https://uiarc.dev — MIT License, Copyright (c) 2026 Elia Kuratli
   Detent — https://detentui.com — MIT License, Copyright (c) 2026 Detent
   Permission notice: see assets/licenses/THIRD-PARTY.txt (full MIT text) and app.js footer.
   -------------------------------------------------------------------------- */
/* Arc UI foundation + motion tokens (subset) and Detent light elevation tokens. */
:root {
  --radius-control: 1.125rem; --radius-panel: 1.625rem; --radius-surface: 2.125rem; --radius-pill: 9999px;
  --ease-enter: cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: linear(0, 0.0213, 0.0739, 0.1443, 0.2235, 0.305, 0.3849, 0.4606, 0.5305, 0.594, 0.6508, 0.7011, 0.7452, 0.7836, 0.8168, 0.8454, 0.8699, 0.8907, 0.9084, 0.9234, 0.9361, 0.9467, 0.9557, 0.9632, 0.9694, 0.9747, 0.979, 0.9826, 0.9857, 0.9882, 0.9902, 0.992, 0.9934, 0.9946, 0.9955, 0.9963, 1);
  --duration-instant: 120ms; --duration-fast: 160ms; --duration-standard: 240ms; --duration-considered: 480ms; --duration-spring: 580ms;
  --shadow-resting: 0 1px 2px rgb(0 0 0 / .035);
  --shadow-raised-arc: 0 6px 18px rgb(0 0 0 / .065), 0 1px 3px rgb(0 0 0 / .035);
  --shadow-floating: 0 20px 48px rgb(0 0 0 / .105), 0 3px 10px rgb(0 0 0 / .045);
  --ease-detent: cubic-bezier(0.2, 0.9, 0.25, 1);
  --elev-raised: 0 0 0 1px rgb(0 0 0 / 0.07), 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 6px -2px rgb(0 0 0 / 0.05);
  --elev-float: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 12px -6px rgb(0 0 0 / 0.08), 0 20px 36px -14px rgb(0 0 0 / 0.16);
}

/* Arc UI — Button: primary hover opacity .91 + resting shadow, press opacity .84 and scale .97 (.985 for wide). */
.button { transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .button:not(.secondary):hover { opacity: .91; box-shadow: var(--shadow-resting); background: var(--ink); } .button.secondary:hover { background: var(--well); box-shadow: var(--shadow-resting); } }
.button:active { opacity: .84; transform: scale(.97); }
#main .purchase .purchase-consult:active, .x-hero .actions .button:active { transform: scale(.985); }

/* Arc UI — Segmented control, applied to the plan picker. Track 3px, 2px gap, selection = surface + 1px border + resting shadow,
   labels change colour only; the highlight glides on Arc's critically damped spring curve. */
#main .sku-options { padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--well); }
#main .sku-options button { border-radius: calc(var(--radius-control) - 4px); color: var(--muted); transition: color var(--duration-fast) var(--ease-standard); }
#main .sku-options button:hover { background: transparent; color: var(--ink); }
#main .sku-options button:active { transform: none; }
#main .sku-options button[aria-pressed=true], #main .sku-options button[aria-pressed=true] b { color: var(--ink); }
#main .sku-thumb { border: 1px solid var(--line); border-radius: calc(var(--radius-control) - 4px); background: var(--surface); box-shadow: var(--shadow-resting), 0 2px 8px -4px rgb(0 0 0 / .12); transition: transform var(--duration-spring) var(--ease-spring), width var(--duration-spring) var(--ease-spring), height var(--duration-spring) var(--ease-spring); }

/* Arc UI — Slot text: each character is a reel inside a masked window; cells are 1.6em tall. */
[data-total] { display: inline-flex !important; overflow: visible !important; align-items: flex-end; }
.slot-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.slot-reels { display: inline-flex; height: 1.15em; align-items: flex-start; line-height: 1.15; font-variant-numeric: tabular-nums; }
.slot { position: relative; display: inline-block; height: 1.15em; flex: none; }
.slot-sizer { display: inline-block; visibility: hidden; white-space: pre; }
.slot-window { position: absolute; inset: -.22em -.08em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 .24em, #000 calc(100% - .24em), transparent); mask-image: linear-gradient(to bottom, transparent, #000 .24em, #000 calc(100% - .24em), transparent); }
.slot-strip { position: absolute; top: calc(.22em - .225em); right: .08em; left: .08em; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.slot-cell { display: block; height: 1.6em; padding-top: .225em; box-sizing: border-box; line-height: 1.15; white-space: pre; }

/* Arc UI — Accordion ("lg" size) on native details/summary. */
#main .faq-list, #main .faq > div:last-child { border-top: 1px solid var(--line); }
#main details { border-top: 0 !important; border-bottom: 1px solid var(--line); padding: 0 !important; }
#main summary.acc-trigger { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.25rem; font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; cursor: pointer; list-style: none; transition: color var(--duration-fast) var(--ease-standard); }
#main summary.acc-trigger::-webkit-details-marker { display: none; }
#main summary.acc-trigger::after { content: ""; flex: none; width: 17px; height: 17px; margin: 0; border: 0; background: currentColor; color: var(--faint); transform: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 260ms var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
#main details.acc-open > summary.acc-trigger::after { transform: rotate(180deg); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { #main summary.acc-trigger:hover { color: var(--soft); } #main summary.acc-trigger:hover::after { color: var(--ink); } }
#main .acc-panel { max-width: 62ch; padding: 0 3rem 1.5rem 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
#main .acc-panel p { margin: 0; color: var(--muted) !important; }
#main .acc-panel img { margin-top: 12px; }
@media (max-width: 520px) { #main summary.acc-trigger { min-height: 68px; font-size: 1rem; } #main .acc-panel { padding-right: 1.5rem; font-size: .9375rem; } }

/* Arc UI — In-view title, "line" variant: each line rises out of its own clip; opacity leads, transform settles last. */
.ivt-line { display: block; overflow: hidden; padding: .06em .12em .18em; margin: -.06em -.12em -.18em; }
.ivt-part { display: inline-block; transform: translateY(112%); opacity: 0; transition: transform .86s var(--ease-enter) var(--ivt-d, 0ms), opacity .48s var(--ease-standard) var(--ivt-d, 0ms); }
.ivt.ivt-in .ivt-part { transform: none; opacity: 1; }
.section-head.x-center .ivt-line, .contact-banner .ivt-line, .pagehero .ivt-line { text-align: inherit; }

/* Detent — Announcement pill: 36px pill, raised shadow, dark tag that rolls to its action, one run of light around the edge. */
@property --announce-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.announce { position: relative; display: inline-flex; height: 36px; max-width: 100%; align-items: center; gap: 8px; padding: 0 12px 0 4px; border: 0 !important; border-radius: 9999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; box-shadow: var(--elev-raised) !important; text-decoration: none; }
.announce-ring { position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s; background: conic-gradient(from var(--announce-spin), transparent 0 68%, currentColor 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.announce:hover .announce-ring, .announce:focus-visible .announce-ring { opacity: .75; animation: announce-run 1.8s cubic-bezier(.6,0,.3,1) both; }
@keyframes announce-run { to { --announce-spin: 360deg; } }
.announce-tag { position: relative; display: inline-grid; height: 28px; place-items: center; overflow: hidden; padding: 0 10px; border-radius: 9999px; background: var(--ink) !important; color: var(--surface) !important; font-size: 13px; box-sizing: content-box; transition: width .42s var(--ease-detent); }
.announce-tag .roll-word { display: inline-block; white-space: pre; grid-area: 1 / 1; }
.announce-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .announce:hover .announce-ring, .announce:focus-visible .announce-ring { animation: none; opacity: 0; } }

/* --------------------------------------------------------------------------
   Own work, inspired by references (no source copied):
   marquee — Arc "logo marquee" idea + motionin.design's slow drifting sections;
   large-type footer — footer.design "Large Type" category; editorial rhythm — godly / landdding.
   -------------------------------------------------------------------------- */
.x-marquee { position: relative; overflow: hidden; margin: 72px 0 0; padding: 22px 0; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.x-marquee-track { display: flex; width: max-content; animation: x-marquee 46s linear infinite; }
.x-marquee:hover .x-marquee-track { animation-play-state: paused; }
.x-marquee-row { display: flex; flex: none; }
.x-marquee-row span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; letter-spacing: -.01em; color: var(--sub); white-space: nowrap; }
.x-marquee-row span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
@keyframes x-marquee { to { transform: translateX(-50%); } }

.site-footer { position: relative; overflow: hidden; padding-bottom: 0; }
.footer-main { align-items: flex-start; }
.footer-brand p { margin-top: 10px; color: var(--muted); }
.footer-links { gap: 10px 28px; }
.footer-links a { font-size: 14px; }
.footer-contact { margin-top: 36px; font-size: 14px; color: var(--muted); }
.footer-contact strong { color: var(--ink); font-weight: 500; }
.footer-bottom { padding-top: 22px; border-top: 1px solid var(--line); }
.footer-mark { margin: 28px 0 -0.2em; font-size: clamp(88px, 21vw, 300px); font-weight: 600; line-height: .82; letter-spacing: -.065em; text-align: center; color: transparent; background: linear-gradient(180deg, rgba(22, 22, 21, .14), rgba(22, 22, 21, .02) 92%); -webkit-background-clip: text; background-clip: text; user-select: none; pointer-events: none; }

/* Anti-nesting (tasteskill/minimalist §16): no boxed purchase panel inside a card on the services page. */
#main .spec-card .purchase { margin-top: 20px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }

/* Mobile motion (60fps.design study): faster, shorter press feedback on touch. */
@media (hover: none) { .service-card:active, .x-float:active, .guide-row:active { transform: scale(.985) !important; transition-duration: 120ms; } }

@media (prefers-reduced-motion: reduce) {
  .x-marquee-track { animation: none; }
  .ivt-part { transform: none; opacity: 1; }
}
/* fixes */
.x-badge.announce span.announce-text { padding: 0; background: none; color: var(--soft); font-size: 13.5px; font-weight: 400; }
.x-badge.announce { padding: 0 14px 0 4px; }
#main .p2-head .notice { align-self: center; width: auto; margin: 0 0 6px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--soft); }
@media (max-width: 760px) {
  #main .p2-head h1 { font-size: 9vw; }
  .p2-head { padding: 22px 0 22px; }
  #main .p2-head .eyebrow { display: none; }
  #main .p2-head .notice { margin-bottom: 12px; font-size: 13px; }
  #main .p2-head .lede { margin-top: 14px; font-size: 15px; line-height: 1.65; }
  #main .p2-head .fit-note { margin-top: 14px; padding: 8px 12px; font-size: 12px; border-radius: 14px; }
  #main .p2-head .fit-note span { display: inline; margin-left: 6px; }
  .p2-stage { padding: 10px 10px 28px; border-radius: 28px; gap: 28px; }
  #main .p2-buy .purchase { padding: 16px; border-radius: 22px; }
  #main .purchase-total { margin-top: 14px; padding-top: 12px; }
  #main .purchase-total strong { font-size: 40px; }
  #main .purchase-cycle { margin: 6px 0 10px !important; }
  #main .purchase .purchase-consult { min-height: 50px; }
  #main .sku-options button { min-height: 58px; }
}

/* Site palette (final). Contrast measured with the WCAG 2.x formula (ColorHexa-style):
   canvas #FAFAF8 · surface #FFFFFF · well #F2F1ED · line #E7E6E1
   ink #161615 (17.3:1 on canvas) · soft #3D3D3A (10.4:1) · muted #6B6A65 (5.2:1; 4.8:1 on well)
   sub #878680 (3.5:1, display-size grey second lines only) · cobalt #3A5CF0 (5.1:1; white on cobalt 5.3:1)
   cobalt-ink #2F4FD8 (6.2:1, small links) · secondary soft #E3E8FD (gradient glow only, never text). */
:root {
  --canvas: #FAFAF8; --surface: #FFFFFF; --well: #F2F1ED; --line-solid: #E7E6E1;
  --ink: #161615; --soft: #3D3D3A; --muted: #6B6A65; --faint: #6B6A65; --sub: #878680;
  --cobalt: #3A5CF0; --cobalt-ink: #2F4FD8; --link: #2F4FD8; --cobalt-soft: #E3E8FD;
  --stage-bg:
    radial-gradient(70% 55% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(45% 45% at 88% 92%, rgba(227, 232, 253, 0.9), rgba(227, 232, 253, 0) 72%),
    radial-gradient(40% 40% at 10% 85%, rgba(242, 241, 237, 0.9), rgba(242, 241, 237, 0) 72%),
    #F2F1ED;
}
#main a:not(.button):not(.service-card):not(.guide-row):not(.x-float):not(.announce):hover { color: var(--cobalt-ink); }
::selection { background: var(--cobalt-soft); }

/* ==========================================================================
   Round 3 (preview, 2026-11-10): token scale, hero shader stage, scroll motion,
   CTA panel and footer. Ideas: uicolors.app/tokens (3-step radius/shadow/space
   scale), scrollshaders.com (paused-offscreen gradient loop — own shader, not
   theirs), scrolltide.co (sticky card stack, scroll-linked parallax — own CSS),
   cta.gallery (CTA panel: headline + 2 actions + proof row), footer.design
   (statement + columns + giant wordmark). Sanity-checked against Refero
   "white with one accent" styles (ElevenLabs, Intercom).
   ========================================================================== */
:root {
  /* spacing scale (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  /* radius scale: control / card / stage, + pill */
  --radius-1: 12px; --radius-2: 26px; --radius-3: 40px;
  /* shadow scale */
  --shadow-1: var(--shadow-resting); --shadow-2: var(--shadow-raised-arc); --shadow-3: var(--shadow-floating);
  /* on-dark tokens (footer) */
  --on-ink: #FFFFFF; --on-ink-soft: #C9C8C2; --on-ink-muted: #A3A29C; --on-ink-line: rgb(255 255 255 / .1); --cobalt-on-dark: #9AABFF;
}

/* --- hero stage shader (desktop) ------------------------------------------ */
.x-stage .x-shader { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-standard); border-radius: inherit; }
.x-stage .x-shader.on { opacity: 1; }
.x-stage > :not(.x-shader) { z-index: 1; }
.x-stage .x-float { z-index: 3; }

/* --- scroll-linked motion (progressive; IO reveal stays as fallback) ------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #main .x-bento .card-scene img { animation: s3-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    #main .x-stage .hero-image img { animation: s3-rise linear both; animation-timeline: view(); animation-range: cover 45% exit 100%; }
    #main .x-stage .x-float--left { animation: s3-float-l linear both; animation-timeline: view(); animation-range: cover 40% exit 100%; }
    #main .x-stage .x-float--right { animation: s3-float-r linear both; animation-timeline: view(); animation-range: cover 40% exit 100%; }
    #main .feature-art img { animation: s3-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes s3-drift { from { translate: 0 12px; } to { translate: 0 -12px; } }
@keyframes s3-rise { from { translate: 0 0; } to { translate: 0 -36px; } }
@keyframes s3-float-l { from { translate: 0 0; } to { translate: 0 -64px; } }
@keyframes s3-float-r { from { translate: 0 0; } to { translate: 0 -24px; } }
@keyframes s3-settle { from { scale: 1.045; opacity: .6; } to { scale: 1; opacity: 1; } }

/* --- sticky card stack: Android 开通流程 (desktop) ------------------------- */
@media (min-width: 1100px) {
  #main .flow > .container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--space-8); align-items: start; }
  #main .flow .flow-head { position: sticky; top: 128px; }
  #main .flow > .container > ol { display: block; }
  #main .flow > .container > ol > li { position: sticky; top: calc(128px + var(--i, 0) * 22px); margin-bottom: 14vh; min-height: 168px; box-shadow: var(--shadow-2); background: var(--surface); }
  #main .flow > .container > ol > li:last-child { margin-bottom: 0; }
  #main .flow > .container > ol > li:nth-child(2) { --i: 1; }
  #main .flow > .container > ol > li:nth-child(3) { --i: 2; }
  #main .flow > .container > ol > li:nth-child(4) { --i: 3; }
  #main .flow > .container > ol > li b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
  #main .flow > .container > ol > li p { font-size: 15px; max-width: 32em; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  #main .flow > .container > ol > li { position: static; margin-bottom: var(--space-4); }
}

/* --- CTA panel (cta.gallery pattern) -------------------------------------- */
#main .cta3 .contact-banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) auto; align-items: end; justify-items: start; text-align: left;
  gap: var(--space-6) var(--space-8);
  padding: clamp(36px, 5.5vw, 80px);
  border: 1px solid var(--line); border-radius: var(--radius-3);
  background: var(--surface); box-shadow: var(--shadow-1);
}
#main .cta3 .cta3-glow { position: absolute; z-index: -1; inset: auto -10% -60% 40%; height: 120%; border-radius: 50%; background: radial-gradient(closest-side, var(--cobalt-soft), rgb(227 232 253 / 0)); pointer-events: none; }
#main .cta3 .contact-banner > .cta3-copy { display: block; align-items: initial; }
#main .cta3 .contact-banner h2 { max-width: 11em; font-size: clamp(36px, 4.8vw, 68px); }
#main .cta3 .contact-banner p { max-width: 30em; margin-top: var(--space-4); }
#main .cta3 .cta3-actions { display: flex; flex-direction: column; gap: var(--space-3); min-width: 240px; }
#main .cta3 .cta3-actions .button { width: 100%; justify-content: center; min-height: 52px; }
#main .cta3 .cta3-points { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); width: 100%; margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13.5px; color: var(--muted); }
#main .cta3 .cta3-points li { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
#main .cta3 .cta3-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); }
#main .cta3 .ivt-line { text-align: left; }
@media (max-width: 760px) {
  #main .cta3 .contact-banner { grid-template-columns: 1fr; padding: 36px 24px; border-radius: 30px; }
  #main .cta3 .cta3-actions { width: 100%; min-width: 0; }
  #main .cta3 .cta3-points { flex-direction: column; gap: 10px; }
}

/* --- footer (footer.design pattern), dark card ---------------------------- */
.site-footer.f3 { margin: var(--space-9) 12px 12px; padding: 0; border: 0; border-radius: var(--radius-3); background: var(--ink); color: var(--on-ink-soft); overflow: hidden; }
.f3 .f3-inner { padding-top: clamp(48px, 6vw, 88px); }
.f3 .f3-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); gap: var(--space-7) var(--space-8); }
.f3 .brand { color: var(--on-ink); font-size: 20px; }
.f3 .brand .brandmark { background: #FFFFFF; color: var(--ink); }
.f3 .f3-statement { margin: var(--space-5) 0 0; font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; color: var(--on-ink); }
.f3 .f3-statement span { display: block; color: var(--on-ink-muted); }
.f3 .f3-note { margin-top: var(--space-4); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--on-ink-muted); }
.f3 .f3-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); font-size: 15px; }
.f3 .f3-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 0; }
.f3 .f3-label { margin: 0 0 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-muted); }
.f3 .footer-links a { color: var(--on-ink-soft); font-size: 15px; transition: color 160ms var(--ease-standard); }
.f3 .footer-links a:hover, .f3 .footer-links a:focus-visible { color: var(--on-ink); }
.f3 .footer-contact { flex-direction: column; color: var(--on-ink-muted); font-size: 15px; }
.f3 .footer-contact strong { color: var(--on-ink); font-weight: 500; }
.f3 .footer-contact a:hover strong { color: var(--cobalt-on-dark); }
.f3 .footer-contact .text-button { padding: 4px 10px; border: 1px solid var(--on-ink-line); border-radius: 999px; background: transparent; color: var(--on-ink-soft); font-size: 12.5px; }
.f3 .footer-contact .text-button:hover { color: var(--on-ink); border-color: rgb(255 255 255 / .28); }
.f3 .footer-mark { margin: clamp(48px, 7vw, 96px) 0 0; color: transparent; background: linear-gradient(180deg, #3A3A37 0%, #1E1E1C 88%); -webkit-background-clip: text; background-clip: text; font-size: clamp(88px, 21vw, 300px); line-height: .8; user-select: none; }
.f3 .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--on-ink-line); color: var(--on-ink-muted); }
.f3 .f3-up { padding: 6px 14px; border: 1px solid var(--on-ink-line); border-radius: 999px; background: transparent; color: var(--on-ink-soft); font: inherit; cursor: pointer; transition: color 160ms, border-color 160ms; }
.f3 .f3-up:hover, .f3 .f3-up:focus-visible { color: var(--on-ink); border-color: rgb(255 255 255 / .3); }
.f3 :focus-visible { outline: 2px solid var(--cobalt-on-dark); outline-offset: 3px; }
@media (max-width: 900px) { .f3 .f3-top { grid-template-columns: 1fr 1fr; } .f3 .f3-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .site-footer.f3 { margin: var(--space-8) 8px 8px; border-radius: 30px; }
  .f3 .f3-top { grid-template-columns: 1fr; gap: var(--space-6); }
  .f3 .f3-cols { gap: var(--space-5); }
  .f3 .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Dark theme (user choice: 「深色高级感，黑底加蓝紫光」). One palette, every page.
   canvas #08080D · surface #111118 · surface-2 #17171F · well #0C0C12
   text #EDEDF2 (17.1:1) · soft #C4C4CF (11.6:1) · muted #9A9AA8 (7.2:1) · faint #8A8A98 (5.9:1)
   sub #6E6E7E (4.0:1, display second lines only) · hairline rgba(255,255,255,.08/.14)
   blue #4F7BFF · violet #8B5CF6 (glow only) · link #8FA6FF (8.6:1)
   primary button gradient #4A63F0 → #6D4FE8, white text 4.9–5.3:1.
   ========================================================================== */
:root {
  color-scheme: dark;
  --canvas: #08080D; --canvas-2: #08080D; --bg: #08080D;
  --surface: #111118; --surface-2: #17171F; --well: #0C0C12;
  --line: rgb(255 255 255 / .08); --line-strong: rgb(255 255 255 / .14); --line-solid: #1E1E26;
  --ink: #EDEDF2; --soft: #C4C4CF; --muted: #9A9AA8; --faint: #8A8A98; --sub: #6E6E7E;
  --blue: #4F7BFF; --violet: #8B5CF6;
  --cobalt: #4F7BFF; --accent: #4F7BFF; --cobalt-ink: #8FA6FF; --link: #8FA6FF; --cobalt-soft: rgb(79 123 255 / .16);
  --btn-a: #4A63F0; --btn-b: #6D4FE8;
  --grad: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  --glow-blue: rgb(79 123 255 / .35); --glow-violet: rgb(139 92 246 / .32);
  --on-ink: #FFFFFF; --on-ink-soft: #C4C4CF; --on-ink-muted: #9A9AA8; --on-ink-line: rgb(255 255 255 / .08); --cobalt-on-dark: #8FA6FF;
  --tint-pink: var(--surface); --tint-orange: var(--surface); --tint-green: var(--surface); --tint-blue: var(--surface);
  --shadow-resting: 0 1px 0 rgb(255 255 255 / .04) inset, 0 1px 2px rgb(0 0 0 / .5);
  --shadow-raised-arc: 0 1px 0 rgb(255 255 255 / .05) inset, 0 8px 24px rgb(0 0 0 / .45);
  --shadow-floating: 0 1px 0 rgb(255 255 255 / .06) inset, 0 24px 64px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .06);
  --shadow: var(--shadow-raised-arc); --elev-raised: var(--shadow-raised-arc); --elev-float: var(--shadow-floating);
  --stage-bg:
    radial-gradient(60% 55% at 50% 0%, rgb(79 123 255 / .22), rgb(79 123 255 / 0) 70%),
    radial-gradient(45% 50% at 85% 90%, rgb(139 92 246 / .20), rgb(139 92 246 / 0) 72%),
    radial-gradient(40% 45% at 10% 80%, rgb(79 123 255 / .10), rgb(79 123 255 / 0) 72%),
    #0C0C12;
}
html, body { background: var(--canvas); color: var(--ink); }
body::before { content: ""; position: fixed; inset: -20vh -10vw auto; height: 70vh; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 30% 0%, rgb(79 123 255 / .10), transparent 70%), radial-gradient(40% 50% at 80% 0%, rgb(139 92 246 / .08), transparent 70%); }
::selection { background: rgb(79 123 255 / .35); color: #fff; }
#main a:not(.button):not(.service-card):not(.guide-row):not(.x-float):not(.announce):hover { color: var(--link); }
:focus-visible { outline-color: var(--link) !important; }

/* header / nav */
.site-header, header.site-header { background: transparent; }
.brandmark { background: var(--grad) !important; color: #fff !important; box-shadow: 0 0 18px var(--glow-violet); }
.brand, .brand b { color: var(--ink); }
.brand small { color: var(--faint); }

/* buttons */
.button, #main .button, a.button { background: var(--grad); color: #fff; border: 1px solid rgb(255 255 255 / .14);
  box-shadow: 0 0 0 1px rgb(79 123 255 / .25), 0 8px 28px -6px var(--glow-blue), 0 1px 0 rgb(255 255 255 / .18) inset; }
.button:hover, #main .button:hover { background: linear-gradient(135deg, #5872FF, #7B5CF2); color: #fff; box-shadow: 0 0 0 1px rgb(139 92 246 / .45), 0 10px 36px -6px var(--glow-violet), 0 1px 0 rgb(255 255 255 / .22) inset; }
.button.secondary, #main .button.secondary { background: rgb(255 255 255 / .04); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
.button.secondary:hover, #main .button.secondary:hover { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(143 166 255 / .45); box-shadow: 0 0 24px -8px var(--glow-blue); }
.text-button { color: var(--link); }

/* generic surfaces: anything that used to be white becomes a lifted dark surface */
#main .service-card, #main .spec-card, #main .scene-card, #main .purchase, #main .flow > .container > ol > li, #main .usecases article,
#main .features article, #main details, #main .guide-row, #main .contact-layout form, #main .contact-side, #main .assure, #main .check,
#main .split-copy > div:last-child .lede + *, #main .x-price-row > *, #main .compat li, #main .faq-list details {
  background-color: var(--surface); border-color: var(--line); color: var(--ink);
}
#main .card-scene, #main .feature-art, #main .x-float-art { background-color: var(--well); }
#main .service-card:hover, #main .guide-row:hover { border-color: rgb(143 166 255 / .28); box-shadow: 0 0 0 1px rgb(79 123 255 / .14), 0 18px 60px -20px var(--glow-violet); }

/* hero stage glow + shader canvas sits on the dark aurora */
#main .x-stage, #main .p2-stage-wrap .p2-stage { border-color: var(--line); background: var(--stage-bg); }
.x-orbit, .x-orbit::before, .x-orbit::after { border-color: rgb(143 166 255 / .14) !important; }
#main .x-float { background: rgb(23 23 31 / .86); border: 1px solid var(--line-strong); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#main .x-float em { color: var(--muted); }
.announce { background: rgb(255 255 255 / .04) !important; border-color: var(--line-strong) !important; color: var(--soft) !important; }
.announce-tag { background: var(--grad) !important; color: #fff !important; }

/* SKU segmented control: gradient-border selected thumb */
#main .sku-options { background: var(--well); border: 1px solid var(--line); }
#main .sku-options button { color: var(--muted); background: transparent; }
#main .sku-options button[aria-pressed="true"] { color: #fff; }
#main .sku-thumb { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(135deg, #6E8CFF, #9B6CFF) border-box !important;
  border: 1px solid transparent !important; box-shadow: 0 0 22px -4px var(--glow-violet), 0 1px 0 rgb(255 255 255 / .08) inset !important; }
#main .purchase { box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px rgb(79 123 255 / .35); }
#main [data-total] { color: #fff; }

/* period pills & chips */
#main .period, #main .pills span, #main .card-pills span, #main .x-price-row span { border-color: var(--line); }

/* forms */
input, select, textarea { background: var(--well) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: rgb(143 166 255 / .7) !important; box-shadow: 0 0 0 4px rgb(79 123 255 / .18) !important; outline: none; }
select option { background: #17171F; color: #EDEDF2; }
label, .field label { color: var(--soft); }
#main output, #main pre, #main #inquiry-output, #main .inquiry-text { background: var(--well); color: var(--ink); border-color: var(--line); }

/* Alipay QR must stay on white so it scans */
img[src*="alipay-payment"] { background: #fff; padding: 12px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line-strong), 0 20px 50px -20px rgb(0 0 0 / .8); }

/* device screenshots / feature art: a hairline so light UIs don't glare */
#main .hero-image img, #main .feature-art img, #main .card-scene img, #main .x-float-art img { box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 24px 60px -24px rgb(0 0 0 / .9); }
#main ul.app-logos img, #main .logos img { background: transparent; }

/* marquee */
.x-marquee { border-color: var(--line) !important; }
.x-marquee-row span { color: var(--sub); }

/* CTA panel: dark surface with blue-violet light */
#main .cta3 .contact-banner { background: radial-gradient(70% 90% at 100% 100%, rgb(139 92 246 / .22), transparent 70%), radial-gradient(60% 80% at 0% 0%, rgb(79 123 255 / .14), transparent 70%), var(--surface); border-color: var(--line-strong); box-shadow: 0 40px 100px -40px rgb(79 123 255 / .35); }
#main .cta3 .cta3-glow { display: none; }
#main .cta3 .cta3-points { border-color: var(--line); }
#main .cta3 .cta3-points li::before { background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 0 10px var(--glow-blue); }
#main .contact-banner { background: var(--stage-bg); border-color: var(--line); }

/* footer on dark: a slightly darker card with a violet horizon */
.site-footer.f3 { background: radial-gradient(80% 60% at 50% 115%, rgb(139 92 246 / .22), transparent 70%), radial-gradient(60% 50% at 15% 120%, rgb(79 123 255 / .18), transparent 70%), #0C0C12; border: 1px solid var(--line); }
.f3 .brand .brandmark { background: var(--grad) !important; color: #fff !important; }
.f3 .footer-mark { background: linear-gradient(180deg, rgb(143 166 255 / .22) 0%, rgb(139 92 246 / .04) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* mobile dock + menu */
.dock { background: rgb(17 17 24 / .82) !important; border: 1px solid var(--line-strong) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 50px -10px rgb(0 0 0 / .8) !important; }
.dock a, .dock button { color: var(--ink); }
.toast { background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--line-strong); }

/* dark audit fixes */
a.skip { background: var(--surface-2) !important; color: var(--ink) !important; }
#navigation { background: rgb(17 17 24 / .72) !important; border-color: var(--line-strong) !important; box-shadow: 0 10px 40px -10px rgb(0 0 0 / .8) !important; }
#navigation a:not(.button) { color: var(--soft) !important; }
#navigation a:not(.button):hover, #navigation a[aria-current="page"]:not(.button) { background: rgb(255 255 255 / .06) !important; color: #fff !important; }
#navigation .button.compact, .nav .button.compact { background: var(--grad) !important; color: #fff !important; }
@media (max-width: 760px) { #navigation { background: rgb(12 12 18 / .96) !important; } }
#main .service-card .card-end { background: rgb(255 255 255 / .06); color: var(--ink); border: 1px solid var(--line-strong); }
#main .service-card:hover .card-end { background: var(--grad); color: #fff; border-color: transparent; }
.announce-ring { background: conic-gradient(from 0deg, var(--blue), var(--violet), var(--blue)) !important; }
.roll-word { color: #fff !important; background: transparent !important; }
.p2-head .notice, p.fit-note, #main .fit-note { background: transparent !important; color: var(--soft) !important; }
p.fit-note span, .fit-note span { color: var(--faint) !important; }
#main figure.hero-shot.p2-card, #main .p2-card { background: var(--surface) !important; border-color: var(--line) !important; }
figcaption, #main figcaption, #main figcaption a { color: var(--faint) !important; }
.payee-note, p.payee-note { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }
.payee-note * { color: inherit !important; }
#main dd { color: var(--soft); }
#main dd[class*="ok"], #main .ok, #main dd:has(+ *), #main .compat dd { color: var(--soft); }
.purchase { background: var(--surface) !important; border-color: var(--line) !important; }
.purchase-total { border-top-color: var(--line) !important; }
.purchase-cycle, .purchase-tools, .purchase-trial { color: var(--muted) !important; }
.purchase-feedback { color: var(--link) !important; }
.purchase [data-consult]:focus-visible, .sku-options button:focus-visible { outline-color: var(--link) !important; }
.sku-options button { border-color: transparent !important; }
.sku-options button:hover { background: rgb(255 255 255 / .04) !important; }
.sku-options button[aria-pressed=true] { background: transparent !important; box-shadow: none !important; }
.shelf-periods span, #main .shelf-periods span { background: rgb(255 255 255 / .05) !important; color: var(--soft) !important; }
:root { --green: #5EE6A0; --orange: #FDBA74; --pink: #F9A8D4; }

/* ==========================================================================
   Motion system + ported components (round 3). Tokens:
   --m-fast 160ms (press/hover) · --m-base 320ms (state) · --m-slow 640ms (enter)
   --m-story 1100ms (hero choreography) · ease-out cubic-bezier(.22,1,.36,1)
   ease-spring cubic-bezier(.34,1.4,.64,1) for small UI only. Transform/opacity only.
   ========================================================================== */
:root { --m-fast: 160ms; --m-base: 320ms; --m-slow: 640ms; --m-story: 1100ms; --m-ease: cubic-bezier(.22,1,.36,1); --m-spring: cubic-bezier(.34,1.4,.64,1); --m-stagger: 70ms; }
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* 1. Cross-document page transition (View Transitions API, progressive) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 220ms var(--m-ease) both; }
::view-transition-new(root) { animation: vt-in 360ms var(--m-ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* 2. Scroll progress hairline (scroll-driven, progressive) */
.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 90; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--violet)); box-shadow: 0 0 12px var(--glow-violet); pointer-events: none; }
@supports (animation-timeline: scroll()) { .scroll-progress { animation: sp-grow linear both; animation-timeline: scroll(root); } }
@keyframes sp-grow { to { transform: scaleX(1); } }

/* 3. Hero entrance choreography (home + product heroes) */
@media (prefers-reduced-motion: no-preference) {
  #main .x-hero-head > *, #main .p2-head > * { animation: intro-up var(--m-slow) var(--m-ease) both; }
  #main .x-hero-head > :nth-child(1), #main .p2-head > :nth-child(1) { animation-delay: 60ms; }
  #main .x-hero-head > :nth-child(2), #main .p2-head > :nth-child(2) { animation-delay: 130ms; }
  #main .x-hero-head > :nth-child(3), #main .p2-head > :nth-child(3) { animation-delay: 200ms; }
  #main .x-hero-head > :nth-child(4), #main .p2-head > :nth-child(4) { animation-delay: 300ms; }
  #main .x-hero-head > :nth-child(5), #main .p2-head > :nth-child(5) { animation-delay: 380ms; }
  #main .x-hero-head > :nth-child(n+6), #main .p2-head > :nth-child(n+6) { animation-delay: 450ms; }
  #main .x-hero h1, #main .p2-head h1 { animation-name: intro-title; animation-duration: var(--m-story); }
  #main .x-stage { animation: intro-stage var(--m-story) var(--m-ease) 380ms both; }
  #main .x-stage .hero-image { animation: intro-phone var(--m-story) var(--m-ease) 560ms both; }
  #main .x-stage .x-float--left { animation: intro-float-l var(--m-story) var(--m-ease) 760ms both; }
  #main .x-stage .x-float--right { animation: intro-float-r var(--m-story) var(--m-ease) 860ms both; }
  #main .p2-stage-wrap { animation: intro-stage var(--m-story) var(--m-ease) 420ms both; }
}
@keyframes intro-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes intro-title { from { opacity: 0; transform: translateY(22px); } }
@keyframes intro-stage { from { opacity: 0; transform: translateY(28px) scale(.975); } }
@keyframes intro-phone { from { opacity: 0; transform: translateY(60px); } }
@keyframes intro-float-l { from { opacity: 0; transform: translate(-24px, 24px) rotate(-2deg); } }
@keyframes intro-float-r { from { opacity: 0; transform: translate(24px, 24px) rotate(2deg); } }

/* 4. Glow-hover cards (SmoothUI GlowHover, MIT — re-implemented in CSS vars) */
.glow-card { position: relative; isolation: isolate; }
.glow-card::before, .glow-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--go, 0); transition: opacity var(--m-base) var(--m-ease); }
.glow-card::before { z-index: -1; background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgb(79 123 255 / .12), rgb(139 92 246 / .06) 40%, transparent 70%); }
.glow-card::after { z-index: 2; padding: 1px; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgb(170 186 255 / .75), rgb(139 92 246 / .35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
#main .guide-row.glow-card { border-radius: 20px; }

/* 5. Tilt (SmoothUI TiltCard, MIT — vanilla, transform only) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--m-base) var(--m-ease); will-change: transform; }
.tilt.tilting { transition: transform 80ms linear; }

/* 6. Magnetic (SmoothUI MagneticButton, MIT: strength .3, radius 150) */
.magnetic { transition: translate var(--m-base) var(--m-spring), transform var(--m-fast) var(--m-ease), box-shadow var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease); }
.magnetic.pulling { transition: translate 90ms linear, transform var(--m-fast) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }

/* 7. Edge glow (MicroKit CursorEdgeGlowButton, MIT — recoloured blue-violet) */
.edge { position: relative; overflow: visible; }
.edge-glow { position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; opacity: var(--lo, 0); transition: opacity var(--m-base) var(--m-ease); }
.edge-glow::before, .edge-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(70px 46px at calc(50% + var(--lx, 0px)) 50%, #DCE3FF, rgb(143 166 255 / .85) 30%, rgb(139 92 246 / .5) 55%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.edge-glow::after { inset: -4px; padding: 4px; filter: blur(10px); opacity: .9; }

/* 8. Shine border (MicroKit SubscribeShine, MIT — rotating highlight on hover) */
.shine { position: relative; isolation: isolate; overflow: hidden; }
.shine::before { content: ""; position: absolute; z-index: -2; inset: -60%; background: conic-gradient(from var(--beam), transparent 0 70%, rgb(143 166 255 / .9) 82%, rgb(139 92 246 / .8) 90%, transparent 100%); opacity: 0; transition: opacity var(--m-base); }
.shine::after { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: inherit; background: #111118; }
.shine:hover::before, .shine:focus-visible::before { opacity: 1; animation: beam-spin 2.4s linear infinite; }

/* 9. Border beam (SmoothUI BorderBeam, MIT — conic + mask, pauses offscreen) */
.beam { position: relative; }
.beam > .beam-line { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--beam), transparent 0 78%, rgb(143 166 255 / .0) 80%, #8FA6FF 90%, #A78BFA 96%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam-spin 7s linear infinite; animation-play-state: paused; }
.beam.in-view > .beam-line { animation-play-state: running; }
@keyframes beam-spin { to { --beam: 360deg; } }

/* 10. Cursor-follow glow on dark panels (CTA + footer) */
.follow-glow { position: relative; }
.follow-glow > .fg-light { position: absolute; z-index: 0; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(79 123 255 / .20), rgb(139 92 246 / .10) 50%, transparent); opacity: 0; transform: translate3d(var(--fx, 50%), var(--fy, 50%), 0); transition: opacity var(--m-slow) var(--m-ease); }
.follow-glow.lit > .fg-light { opacity: 1; }
.follow-glow > :not(.fg-light) { position: relative; z-index: 1; }

/* 11. Sliding nav pill (SmoothUI animated tabs pattern) */
#navigation .nav-pill { position: absolute; z-index: 0; top: 0; left: 0; height: 0; border-radius: 999px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); opacity: 0; pointer-events: none;
  transition: transform var(--m-base) var(--m-ease), width var(--m-base) var(--m-ease), opacity var(--m-fast); }
#navigation.has-pill a:not(.button):hover { background: transparent !important; }
#navigation a { position: relative; z-index: 1; }

/* 12. Press feedback */
.button, button, .sku-options button, .service-card, .x-float { -webkit-tap-highlight-color: transparent; }
.button:active, .sku-options button:active, .text-button:active, .f3-up:active { transform: scale(.97); transition-duration: 80ms; }
#main .service-card:active { transform: scale(.985); }

/* 13. App-logo marquee */
.x-marquee--logos { margin-top: 0; border-top: 0 !important; }
.x-marquee--logos .x-marquee-track { animation-direction: reverse; animation-duration: 38s; }
.x-marquee--logos .x-marquee-row span { gap: 12px; padding-right: 44px; font-size: 16px; color: var(--muted); }
.x-marquee--logos .x-marquee-row span::after { display: none; }
.x-marquee--logos img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.x-marquee.off .x-marquee-track { animation-play-state: paused; }

/* 14. Guide sticky steps (scrolltide-style storytelling) */
@media (min-width: 1100px) {
  #main section.reading.steps { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 72px; max-width: 1040px; }
  #main section.reading.steps > .reading-meta { grid-column: 1 / -1; }
  #main section.reading.steps > .guide-rail { grid-column: 1; grid-row: 2 / span 20; position: sticky; top: 120px; align-self: start; }
  #main section.reading.steps > :not(.guide-rail):not(.reading-meta) { grid-column: 2; }
}
.guide-rail { display: none; }
@media (min-width: 1100px) { .guide-rail { display: block; } }
.guide-rail ol { position: relative; margin: 0; padding: 0 0 0 20px; list-style: none; }
.guide-rail ol::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.guide-rail .rail-fill { position: absolute; left: 3px; top: 6px; width: 1px; height: calc(100% - 12px); transform-origin: 0 0; transform: scaleY(var(--p, 0)); background: linear-gradient(var(--blue), var(--violet)); box-shadow: 0 0 10px var(--glow-violet); transition: transform 120ms linear; }
.guide-rail li { margin: 0 0 18px; }
.guide-rail a { display: block; font-size: 14px; line-height: 1.5; color: var(--faint); transition: color var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease); }
.guide-rail a b { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--sub); }
.guide-rail a.on { color: var(--ink); transform: translateX(4px); }
.guide-rail a.on b { color: var(--link); }
#main section.reading.steps article { transition: opacity var(--m-slow) var(--m-ease); }
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) { #main section.reading.steps.js-steps article:not(.on) { opacity: .55; } }

/* Reduced motion: switch everything above off */
@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; } .magnetic { translate: none !important; }
  .edge-glow, .fg-light, .beam-line, .shine::before, .scroll-progress { display: none !important; }
  .x-marquee-track { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media (hover: none) { .edge-glow, .fg-light, .glow-card::after, .glow-card::before { display: none; } }
:root { --band: #111118; }
.service-card.green, .service-card.blue, .service-card.pink, .service-card.orange, .offer.blue, .offer.pink, .offer.orange, .offer.green, .phero.green, .phero.blue, .phero.pink, .phero.orange { --accent: var(--blue); }
@media (min-width: 1100px) {
  #main section.reading.steps.js-steps { display: grid !important; grid-template-columns: 200px minmax(0, 720px); justify-content: center; column-gap: 80px; width: min(1040px, calc(100% - 80px)); max-width: none; margin-inline: auto; }
  #main section.reading.steps.js-steps > article, #main section.reading.steps.js-steps > .plain-link, #main section.reading.steps.js-steps > .vps-table-wrap { max-width: none; margin-inline: 0; }
  #main section.reading.steps.js-steps > .guide-rail { margin-top: 56px; }
}
#main section.reading .guide-rail li { font-size: 14px; line-height: 1.5; color: inherit; }
html.is-scrolled header, header { background: linear-gradient(180deg, rgb(8 8 13 / .92) 0%, rgb(8 8 13 / .6) 60%, rgb(8 8 13 / 0) 100%) !important; }
html:not(.is-scrolled) header { background: transparent !important; }
#main .guide-rail ol { margin: 0; padding: 0 0 0 20px; }
#main .guide-rail li { display: block; width: auto; margin: 0 0 18px; padding: 0; border: 0; }
#main .guide-rail a { width: auto; max-width: none; white-space: normal; }
.dock .dock-copy, .dock button.dock-copy { background: var(--grad) !important; color: #fff !important; border: 1px solid rgb(255 255 255 / .14) !important; box-shadow: 0 6px 20px -6px var(--glow-blue) !important; }
.dock .dock-wa, .dock a.dock-wa { background: rgb(255 255 255 / .06) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
.dock .dock-fit { color: var(--ink) !important; }
.x-marquee-row span { color: var(--faint) !important; }

/* ==========================================================================
   Round 4 — native HTML/CSS/SVG product mockups (replace raster screenshots).
   Everything inside scales with container units (cqw), so it is sharp at any
   size and DPR. Content mirrors the old screenshots; no new data.
   ========================================================================== */
.mk { --mk-bg: #0B0C14; --mk-card: #15161F; --mk-card-2: #1B1C27; --mk-line: rgb(255 255 255 / .08); --mk-text: #F1F1F6; --mk-sub: #A3A3B8; --mk-faint: #7E7E95;
  --mk-grad: linear-gradient(135deg, #4A63F0, #6D4FE8); container-type: inline-size; position: relative; display: block; color: var(--mk-text); font-family: var(--sans); text-align: left; line-height: 1.35; -webkit-font-smoothing: antialiased; }
.mk * { box-sizing: border-box; }
.mk-phone { width: 100%; aspect-ratio: 9 / 19.5; }
.mk-bezel { position: absolute; inset: 0; border-radius: 14cqw; padding: 2.4cqw; background: linear-gradient(160deg, #2C2D3A 0%, #15151D 40%, #0E0E15 100%);
  box-shadow: inset 0 0 0 .45cqw rgb(255 255 255 / .10), inset 0 1.2cqw 2cqw rgb(255 255 255 / .06), 0 0 0 1px rgb(255 255 255 / .05), 0 10cqw 24cqw -8cqw rgb(98 92 246 / .45), 0 18cqw 30cqw -14cqw rgb(0 0 0 / .9); }
.mk-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 11.8cqw; background: var(--mk-bg); }
.mk-phone .mk-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
.mk-island { position: absolute; z-index: 9; left: 50%; top: 2.6cqw; width: 27cqw; height: 7.4cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.mk-hole { position: absolute; z-index: 9; left: 50%; top: 3cqw; width: 4.2cqw; height: 4.2cqw; transform: translateX(-50%); border-radius: 50%; background: #000; box-shadow: 0 0 0 .5cqw #111; }
.mk-status { position: absolute; z-index: 8; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; height: 12cqw; padding: 0 7cqw 0 8cqw; font-size: 3.7cqw; font-weight: 600; letter-spacing: .01em; }
.mk-ios .mk-status { height: 13cqw; padding: 0 8cqw 0 10cqw; font-size: 4cqw; }
.mk-status svg { width: 17cqw; height: 3.6cqw; fill: currentColor; }
.mk-navbar { position: absolute; z-index: 8; inset: auto 0 0; display: flex; justify-content: space-around; align-items: center; height: 10cqw; padding: 0 14cqw; }
.mk-navbar i { width: 3.4cqw; height: 3.4cqw; border: .45cqw solid var(--mk-sub); }
.mk-navbar i:nth-child(1) { border-width: 0 0 .45cqw .45cqw; transform: rotate(45deg); }
.mk-navbar i:nth-child(2) { border-radius: 50%; width: 3.8cqw; height: 3.8cqw; }
.mk-navbar i:nth-child(3) { border-radius: .6cqw; }
.mk-homebar { position: absolute; z-index: 8; left: 50%; bottom: 2.4cqw; width: 36cqw; height: 1.4cqw; transform: translateX(-50%); border-radius: 99px; background: rgb(255 255 255 / .75); }
/* map */
.mk-map { position: absolute; inset: 0; overflow: hidden; }
.mk-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--mx, 50%) var(--my, 50%); box-shadow: none !important; animation: none !important; border-radius: 0 !important; }
.mk-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 12 20 / .6) 0%, rgb(11 12 20 / 0) 16%, rgb(11 12 20 / 0) 62%, rgb(11 12 20 / .7) 100%); }
.mk-search { position: absolute; z-index: 5; left: 5cqw; right: 5cqw; top: 14cqw; display: flex; align-items: center; gap: 2.4cqw; height: 10.5cqw; padding: 0 4cqw; border-radius: 99px; background: rgb(21 22 31 / .82); box-shadow: inset 0 0 0 1px var(--mk-line), 0 3cqw 8cqw -3cqw rgb(0 0 0 / .8); backdrop-filter: blur(8px); font-size: 3.7cqw; color: var(--mk-text); }
.mk-search::before { content: ""; width: 3.2cqw; height: 3.2cqw; border: .5cqw solid var(--mk-sub); border-radius: 50%; flex: none; }
.mk-pin { position: absolute; z-index: 4; width: 0; height: 0; }
.mk-pin .ring { position: absolute; left: -17cqw; top: -17cqw; width: 34cqw; height: 34cqw; border-radius: 50%; background: radial-gradient(closest-side, rgb(109 79 232 / .32), rgb(79 123 255 / .12) 70%, transparent); box-shadow: inset 0 0 0 .35cqw rgb(143 166 255 / .55); }
.mk-pin .dot { position: absolute; left: -3.4cqw; top: -3.4cqw; width: 6.8cqw; height: 6.8cqw; border-radius: 50%; background: var(--mk-grad); box-shadow: 0 0 0 1.1cqw #fff, 0 0 6cqw 2cqw rgb(109 79 232 / .8); }
.mk-pin.blue .dot { background: #4F7BFF; box-shadow: 0 0 0 1.1cqw #fff, 0 0 6cqw 2cqw rgb(79 123 255 / .85); }
@media (prefers-reduced-motion: no-preference) { .mk-pin .ring { animation: mk-pulse 2.8s var(--m-ease, ease) infinite; } }
@keyframes mk-pulse { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.05); opacity: 1; } }
.mk-route { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; }
/* sheets, groups, rows */
.mk-sheet { position: absolute; z-index: 6; left: 2.4cqw; right: 2.4cqw; bottom: 11cqw; padding: 3.4cqw 5cqw 5cqw; border-radius: 7cqw; background: rgb(21 22 31 / .94); box-shadow: inset 0 0 0 1px var(--mk-line), 0 -6cqw 16cqw -6cqw rgb(0 0 0 / .8); backdrop-filter: blur(12px); }
.mk-ios .mk-sheet { bottom: 6cqw; }
.mk-grab { width: 10cqw; height: 1.2cqw; margin: 0 auto 4cqw; border-radius: 99px; background: rgb(255 255 255 / .22); }
.mk-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .8cqw; margin-bottom: 4.4cqw; border-radius: 3.4cqw; background: #0E0F17; box-shadow: inset 0 0 0 1px var(--mk-line); font-size: 3.4cqw; color: var(--mk-sub); text-align: center; }
.mk-seg span { padding: 2.1cqw 0; border-radius: 2.6cqw; }
.mk-seg .on { color: #fff; background: #23253A; box-shadow: inset 0 0 0 1px rgb(143 166 255 / .45), 0 0 5cqw -1cqw rgb(109 79 232 / .7); }
.mk-h { margin: 0; font-size: 5.4cqw; font-weight: 600; letter-spacing: -.01em; color: var(--mk-text); }
.mk-h.xl { font-size: 7.6cqw; }
.mk-sub { margin: 1.4cqw 0 0; font-size: 3.4cqw; color: var(--mk-sub); font-variant-numeric: tabular-nums; }
.mk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; margin-top: 4.6cqw; }
.mk-btn { display: flex; align-items: center; justify-content: center; height: 10.4cqw; border-radius: 99px; background: var(--mk-grad); color: #fff; font-size: 3.7cqw; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 3cqw 8cqw -3cqw rgb(98 92 246 / .9); }
.mk-btn.ghost { background: rgb(255 255 255 / .05); color: var(--mk-text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.mk-btn.wide { grid-column: 1 / -1; }
.mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; margin-top: 4.4cqw; }
.mk-tile { padding: 3cqw 3.6cqw; border-radius: 3.6cqw; background: #0F1019; box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-tile small { display: block; font-size: 3cqw; color: var(--mk-sub); }
.mk-tile b { display: block; margin-top: 1cqw; font-size: 4.6cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-page { position: absolute; inset: 12cqw 0 10cqw; padding: 3cqw 4.6cqw 0; overflow: hidden; }
.mk-ios .mk-page { inset: 14cqw 0 6cqw; }
.mk-head { display: flex; align-items: center; gap: 3.2cqw; margin: 1cqw 0 4cqw; font-size: 6cqw; font-weight: 600; letter-spacing: -.01em; }
.mk-back { width: 3.2cqw; height: 3.2cqw; border: solid var(--mk-text); border-width: 0 0 .55cqw .55cqw; transform: rotate(45deg); margin-left: 1cqw; }
.mk-note { margin: 0 0 3.6cqw; padding: 3.4cqw 3.8cqw; border-radius: 3.6cqw; background: linear-gradient(135deg, rgb(74 99 240 / .16), rgb(109 79 232 / .12)); box-shadow: inset 0 0 0 1px rgb(143 166 255 / .22); font-size: 3.3cqw; line-height: 1.55; color: #D9DDFF; }
.mk-label { margin: 3.6cqw 1.6cqw 1.8cqw; font-size: 3cqw; font-weight: 600; letter-spacing: .04em; color: #9DB0FF; }
.mk-group { border-radius: 4.4cqw; background: var(--mk-card); box-shadow: inset 0 0 0 1px var(--mk-line); overflow: hidden; }
.mk-row { display: flex; align-items: center; gap: 3cqw; min-height: 11.6cqw; padding: 2.2cqw 3.8cqw; font-size: 3.7cqw; }
.mk-row + .mk-row { box-shadow: inset 0 1px 0 var(--mk-line); }
.mk-row > span:first-of-type { flex: 1; min-width: 0; }
.mk-row em { font-style: normal; color: var(--mk-sub); font-size: 3.4cqw; text-align: right; }
.mk-row small { display: block; margin-top: .6cqw; font-size: 2.9cqw; color: var(--mk-sub); }
.mk-row.hl { background: rgb(79 123 255 / .10); }
.mk-row.hl em { color: #9DB0FF; font-weight: 600; }
.mk-check { flex: none; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--mk-grad); position: relative; box-shadow: 0 0 3cqw rgb(109 79 232 / .6); }
.mk-check::after { content: ""; position: absolute; left: 1.7cqw; top: 1cqw; width: 1.3cqw; height: 2.4cqw; border: solid #fff; border-width: 0 .5cqw .5cqw 0; transform: rotate(45deg); }
.mk-toggle { flex: none; width: 9.6cqw; height: 5.6cqw; border-radius: 99px; background: #2A2B38; position: relative; }
.mk-toggle::after { content: ""; position: absolute; left: .6cqw; top: .6cqw; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #8E8EA3; }
.mk-toggle.on { background: var(--mk-grad); box-shadow: 0 0 4cqw -1cqw rgb(109 79 232 / .8); }
.mk-toggle.on::after { left: auto; right: .6cqw; background: #fff; }
.mk-app { position: relative; flex: none; width: 8.6cqw; height: 8.6cqw; }
.mk-app img { width: 100%; height: 100%; border-radius: 2.2cqw; display: block; box-shadow: none !important; animation: none !important; }
.mk-badge { position: absolute; right: -1.2cqw; bottom: -1.2cqw; min-width: 4.2cqw; height: 4.2cqw; padding: 0 1cqw; border-radius: 99px; background: var(--mk-grad); color: #fff; font-size: 2.7cqw; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 .6cqw var(--mk-bg); }
.mk-dotg { flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #5EE6A0; box-shadow: 0 0 2.4cqw #5EE6A0; }
/* SIM cards */
.mk-sims { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.mk-sim { padding: 3.2cqw; border-radius: 4cqw; background: var(--mk-card); box-shadow: inset 0 0 0 1px var(--mk-line); font-size: 2.9cqw; color: var(--mk-sub); }
.mk-sim b { display: block; margin: 2.4cqw 0 .8cqw; font-size: 4.2cqw; color: var(--mk-text); font-weight: 600; }
.mk-sim i { display: inline-grid; place-items: center; width: 3.8cqw; height: 4.8cqw; margin-right: 1.2cqw; border-radius: 1cqw; background: #2A2B38; color: #fff; font-style: normal; font-size: 2.6cqw; font-weight: 700; }
.mk-sim.on { background: linear-gradient(160deg, rgb(74 99 240 / .22), rgb(109 79 232 / .14)); box-shadow: inset 0 0 0 1px rgb(143 166 255 / .55), 0 0 8cqw -2cqw rgb(109 79 232 / .7); }
.mk-sim.on i { background: var(--mk-grad); }
/* home screen */
.mk-wall { position: absolute; inset: 0; background: radial-gradient(80% 50% at 20% 10%, #3B3FA8 0%, transparent 70%), radial-gradient(70% 60% at 90% 70%, #5A2FB0 0%, transparent 70%), linear-gradient(180deg, #171A4A 0%, #10103A 55%, #0B0B22 100%); }
.mk-clock { position: absolute; z-index: 3; left: 9cqw; top: 17cqw; font-size: 19cqw; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mk-date { position: absolute; z-index: 3; left: 9.6cqw; top: 38cqw; font-size: 4cqw; color: rgb(255 255 255 / .82); }
.mk-grid { position: absolute; z-index: 3; left: 7cqw; right: 7cqw; top: 54cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8cqw 4cqw; justify-items: center; }
.mk-grid figure { margin: 0; display: grid; justify-items: center; gap: 2.2cqw; font-size: 3.3cqw; color: rgb(255 255 255 / .92); text-align: center; white-space: nowrap; }
.mk-grid .mk-app { width: 17cqw; height: 17cqw; }
.mk-grid .mk-app img { border-radius: 4.4cqw; box-shadow: 0 2cqw 5cqw -1cqw rgb(0 0 0 / .6) !important; }
.mk-grid .mk-badge { min-width: 6cqw; height: 6cqw; font-size: 3.4cqw; right: -1.6cqw; bottom: -1.6cqw; box-shadow: 0 0 0 .8cqw #15154a; }
.mk-wall + .mk-status { color: #fff; }
/* chat */
.mk-chat { position: absolute; inset: 0; padding: 5cqw; display: flex; flex-direction: column; gap: 3cqw; justify-content: center; }
.mk-msg { display: flex; gap: 2.4cqw; align-items: flex-start; max-width: 88%; }
.mk-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.mk-av { flex: none; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: #23243A; display: grid; place-items: center; font-size: 3.4cqw; font-weight: 700; color: #fff; }
.mk-av.x { background: var(--mk-grad); }
.mk-bub { padding: 2.6cqw 3.4cqw; border-radius: 3.4cqw; background: var(--mk-card-2); box-shadow: inset 0 0 0 1px var(--mk-line); font-size: 3.4cqw; line-height: 1.5; }
.mk-msg.me .mk-bub { background: linear-gradient(135deg, #3C55E0, #5D43D6); box-shadow: none; color: #fff; }
.mk-bub .mk-group { margin: -.4cqw -.8cqw; background: transparent; box-shadow: none; }
.mk-bub .mk-row { min-height: 0; padding: 1.2cqw .8cqw; font-size: 3.1cqw; }
/* camera */
.mk-photo { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; }
.mk-cam-tabs { position: absolute; z-index: 5; left: 0; right: 0; top: 14cqw; display: flex; justify-content: center; gap: 6cqw; font-size: 3.6cqw; color: rgb(255 255 255 / .8); text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.mk-cam-tabs b { color: #fff; font-weight: 600; }
.mk-shutter { position: absolute; z-index: 5; left: 50%; bottom: 16cqw; width: 17cqw; height: 17cqw; transform: translateX(-50%); border-radius: 50%; border: 1.2cqw solid #fff; box-shadow: inset 0 0 0 1.2cqw rgb(0 0 0 / .25), 0 0 8cqw rgb(109 79 232 / .6); background: rgb(255 255 255 / .9); background-clip: content-box; padding: 1.2cqw; }
.mk-credit { position: absolute; z-index: 5; left: 4cqw; bottom: 11.5cqw; font-size: 2.5cqw; color: rgb(255 255 255 / .85); text-shadow: 0 1px 4px rgb(0 0 0 / .8); }
.mk-chip { position: absolute; z-index: 5; padding: 1.6cqw 3cqw; border-radius: 99px; background: rgb(21 22 31 / .9); box-shadow: inset 0 0 0 1px rgb(143 166 255 / .35); font-size: 3cqw; color: #DCE2FF; }

/* placements: a phone shown top-cropped inside a square/landscape stage */
.mk-stage { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: inherit;
  background: radial-gradient(70% 60% at 50% 100%, rgb(109 79 232 / .28), transparent 70%), radial-gradient(60% 50% at 50% 0%, rgb(79 123 255 / .16), transparent 70%), #0C0C12; }
.mk-stage > .mk-phone { position: absolute; left: 50%; top: 9%; width: 62%; transform: translateX(-50%); }
.mk-stage.wide { aspect-ratio: 4 / 3; }
.mk-stage.wide > .mk-phone { width: 46%; top: 8%; }
/* panel: UI shown without bezel, filling a card */
.mk-panel { position: relative; overflow: hidden; border-radius: inherit; background: radial-gradient(70% 60% at 50% 110%, rgb(109 79 232 / .22), transparent 70%), #0E0F18; }
.mk-panel .mk-page { position: relative; inset: auto; padding: 6cqw; }
.mk-panel .mk-chat { position: relative; padding: 6cqw; }
.mk-panel.sq { aspect-ratio: 1 / 1; }
.mk-panel.land { aspect-ratio: 4 / 3; }
.mk-panel.float { position: absolute; inset: 0; }
/* mock placements */
.mk-screen-flat { position: relative; width: 100%; height: 100%; }
.mk-panel .mk-status, .mk-panel .mk-navbar, .mk-panel .mk-hole { display: none; }
.mk-panel .mk-page { padding: 6cqw 6cqw 5cqw; }
.mk-panel.sq .mk-screen-flat, .mk-panel.land .mk-screen-flat { position: absolute; inset: 0; }
.mk-panel .mk-sheet { bottom: 4cqw; left: 4cqw; right: 4cqw; }
.mk-panel .mk-cam-tabs { top: 6cqw; } .mk-panel .mk-shutter { bottom: 7cqw; width: 14cqw; height: 14cqw; } .mk-panel .mk-credit { bottom: 3cqw; }
#main .feature-art .mk-panel, #main .ios-shot-wrap .mk-panel { border-radius: 18px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
#main .howto .mk-panel.land { border-radius: 18px; margin-bottom: 14px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
/* home hero phone */
.x-stage .hero-image .mk-phone.home-shot { position: absolute; left: 50%; top: 52px; width: clamp(250px, 23vw, 300px); transform: translateX(-50%); }
@media (max-width: 760px) { .x-stage .hero-image .mk-phone.home-shot { width: 232px; top: 36px; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  #main .x-stage .hero-image .mk-phone { animation: s3-rise linear both; animation-timeline: view(); animation-range: cover 45% exit 100%; }
  #main .x-bento .card-scene .mk-phone { animation: s3-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } }
/* floating cards */
.x-float-art { position: relative; container-type: inline-size; }
.x-float-art .mk-panel.float { border-radius: inherit; }
.mk-float-multi .mk-fclock { position: absolute; z-index: 3; left: 7cqw; top: 6cqw; font-size: 15cqw; font-weight: 300; line-height: 1; color: #fff; letter-spacing: -.03em; }
.mk-float-multi .mk-fclock small { display: block; margin-top: 2cqw; font-size: 4.4cqw; font-weight: 400; letter-spacing: 0; color: rgb(255 255 255 / .8); }
.mk-float-multi .mk-fgrid { position: absolute; z-index: 3; left: 6cqw; right: 6cqw; bottom: 6cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4cqw 2cqw; justify-items: center; }
.mk-float-multi .f { display: grid; justify-items: center; gap: 1.6cqw; font-size: 4.2cqw; color: rgb(255 255 255 / .92); white-space: nowrap; }
.mk-float-multi .mk-app { width: 15cqw; height: 15cqw; }
.mk-float-multi .mk-app img { border-radius: 3.8cqw; }
.mk-float-multi .mk-badge { min-width: 5.6cqw; height: 5.6cqw; font-size: 3.4cqw; box-shadow: 0 0 0 .8cqw #16164a; }
.x-float-art .mk-sheet .mk-h, .x-float-art .mk-sheet .mk-sub { margin: 0; }
/* bento + services card scenes */
#main .card-scene .mk-phone.x-phone { position: absolute; left: 50%; top: 36px; width: 46%; max-width: 230px; transform: translateX(-50%); transition: transform var(--m-base, .3s) var(--m-ease, ease); }
#main .scene-card:hover .card-scene .mk-phone.x-phone { transform: translateX(-50%) translateY(-8px); }
@media (max-width: 760px) { #main .card-scene .mk-phone.x-phone { width: 52%; top: 28px; } }
/* product heroes */
#main .p2-stage .hero-shot .mk-phone { width: min(100%, 300px); margin: 0 auto; }
#main .p2-stage .p2-card { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#main .p2-stage .hero-shot figcaption { text-align: center; margin-top: 18px; }
/* story art */
#main .story-art .mk-stage { border-radius: 22px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
#main .story-art { background: transparent; padding: 0; }

.mk-float-multi .mk-fclock { font-size: 11cqw; top: 5cqw; }
.mk-float-multi .mk-fclock small { font-size: 3.8cqw; margin-top: 1.2cqw; }
.mk-float-multi .mk-fgrid { bottom: 4.5cqw; gap: 2.6cqw 2cqw; }
.mk-float-multi .mk-app { width: 11.5cqw; height: 11.5cqw; }
.mk-float-multi .f { font-size: 3.6cqw; gap: 1.2cqw; }
.mk-panel.sq::after, .mk-panel.land::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(180deg, transparent, #0E0F18); pointer-events: none; z-index: 7; }

/* ==========================================================================
   Round 4 — richer type colour (user: 「文字颜色太素」). Studied live: Linear
   (#E2E4E7 / #D0D6E0 cool white, #8B93A1 blue-grey, #8FA6FF link, #DFD1FF
   lavender), Detent (#3D6DFF / #7C5CFF, tints #B9D0FF #C5A8FF #EFE8FF), Color Hunt
   dark "#091540 #1B2CC1 #7692FF #ABD2FA" + "#00105B #6061B6 #C9B5E0", colorion
   #3A5BF0 / #6366F1, uicolors tokens #7F99EF / #AD87ED / #EEE9FF.
   All ratios vs canvas #08080D (worst case over hero glow #1B2446 in brackets).
   ========================================================================== */
:root {
  --ink: #EEF0FA;   /* body 17.6:1 (13.3) */
  --soft: #CBD1EE;  /* lede / secondary 13.2:1 (10.0) */
  --muted: #A6ADD0; /* captions 9.1:1 (6.9) */
  --faint: #9198BE; /* meta 7.1:1 (5.4) */
  --sub: #7C83AA;   /* display second tier only 5.4:1 (4.1, large text) */
  --kicker: #9DB4FF;  /* eyebrows, labels 9.9:1 (7.5) */
  --kicker-2: #BBA3FF;/* violet labels 9.3:1 (7.1) */
  --ice: #C9D6FF;     /* inline emphasis 13.8:1 */
  --link: #8FA6FF; --cobalt-ink: #8FA6FF; --cobalt-on-dark: #8FA6FF;
  --price: #F7F8FF;   /* 18.9:1 + glow */
  --price-unit: #A9B8FF; /* 10.5:1 */
  --text-grad: linear-gradient(100deg, #F5F6FF 0%, #DCE3FF 45%, #C9D4FF 100%);
  --text-grad-accent: linear-gradient(95deg, #A8B6FF 0%, #B3AEFF 50%, #C2A6FF 100%); /* lightest/darkest stop 10.3 / 9.7:1 */
  --price-glow: 0 0 28px rgb(124 140 255 / .45), 0 0 2px rgb(201 214 255 / .35);
  --on-ink-soft: var(--soft); --on-ink-muted: var(--muted);
}
html, body { color: var(--ink); }
/* headlines: two-tone gradient, first line cool white→ice, second line blue→violet */
#main h1, #main h2, .cta3 h2, .f3-brand h2 {
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
#main h1 .h-sub, #main h2 .h-sub, .cta3 h2 .h-sub {
  background: var(--text-grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
#main h3 { color: #F1F3FF; }
#main h2 .h-sub, #main h1 .h-sub { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (forced-colors: active) { #main h1, #main h2, #main .h-sub { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; } }
/* body + secondary */
#main p, #main li, #main dd { color: inherit; }
#main .lede, #main p.lede, .x-hero .lede { color: var(--soft); }
#main section p:not([class]) { color: var(--soft); }
#main figcaption, #main .reading-meta, .brand small, #main .purchase-cycle, #main small { color: var(--muted); }
#main strong, #main b { color: var(--ice); }
#main .button strong, #main .button b { color: inherit; }
/* kickers */
#main .eyebrow, .eyebrow, #main .hero-kicker, #main .kicker-words, #main .purchase-label, #main .reading-meta b {
  color: var(--kicker); }
#main .eyebrow::before { background: linear-gradient(135deg, #8FA6FF, #BBA3FF) !important; box-shadow: 0 0 10px rgb(143 166 255 / .6); }
.f3-label, .site-footer .f3-label { color: var(--kicker-2) !important; }
.announce-tag { color: #fff; background: var(--grad) !important; }
.announce .announce-text, .x-badge { color: var(--ice); }
#main .stage-no { background: var(--text-grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
#main .value-strip span { color: var(--soft); }
/* prices and numerals */
#main .price, #main .hero-prices dd, #main .purchase-total strong, #main [data-total] {
  color: var(--price) !important; text-shadow: var(--price-glow); font-variant-numeric: tabular-nums; }
#main .price small, #main .hero-prices dd small { color: var(--price-unit) !important; text-shadow: none; }
#main .hero-prices dt { color: var(--kicker); }
#main .shelf-periods span { color: var(--soft); }
#main .purchase-total > span { color: var(--kicker); }
#main .sku-options button[aria-pressed="true"], #main .sku-options button[aria-checked="true"], #main .sku-options .is-active { color: #fff; }
#main .sku-options button small, #main .sku-options button span + span { color: var(--price-unit); }
/* FAQ, forms, toast, dock, footer, CTA */
#main summary { color: #F1F3FF; }
#main details[open] summary { color: var(--ice); }
#main details p, #main details li { color: var(--soft); }
#main label, .contact-layout label { color: var(--soft); }
#main input::placeholder, #main textarea::placeholder { color: var(--faint); }
.toast, [role="status"].toast { color: var(--ice); }
.site-footer, .site-footer a { color: var(--soft); }
.site-footer a:hover { color: var(--link); }
.site-footer .footer-bottom, .site-footer .footer-bottom * { color: var(--faint); }
.footer-mark { background: linear-gradient(180deg, rgb(143 166 255 / .22), rgb(187 163 255 / .02)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent !important; }
.cta3 p, .cta3-points li { color: var(--soft); }
.dock, .dock * { color: inherit; }
#main .x-marquee-row span { color: var(--muted); }
#main .x-marquee-row span::before { background: linear-gradient(135deg, #8FA6FF, #BBA3FF) !important; }
/* split in-view titles: transformed line wrappers can't share the parent's text clip, so each line carries the gradient */
#main h2:has(.ivt-line) { background: none; -webkit-text-fill-color: currentColor; color: #EEF0FA; }
#main h2 .ivt-part { background: var(--text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
#main h2 .ivt-line + .ivt-line .ivt-part, #main h2 .ivt-part .h-sub { background: var(--text-grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* legacy screenshot <img> rules must not reach images inside the HTML mockups */
#main .mk img, .mk img { position: static !important; inset: auto !important; transform: none !important; translate: none !important; width: 100% !important; max-width: none !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; box-shadow: none !important; animation: none !important; filter: none !important; }
#main .mk .mk-map img, .mk .mk-map img { position: absolute !important; inset: 0 !important; border-radius: 0 !important; }
#main .mk .mk-app img, .mk .mk-app img { border-radius: 2.2cqw !important; object-fit: contain; }
#main .mk .mk-grid .mk-app img { border-radius: 4.4cqw !important; box-shadow: 0 2cqw 5cqw -1cqw rgb(0 0 0 / .6) !important; }
#main .mk-float-multi .mk-app img { border-radius: 3.8cqw !important; }
/* Round 4 references applied */
/* Linear / supahero: product UI shots dissolve into the surface instead of hard-cropping */
#main .card-scene { position: relative; }
#main .card-scene::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgb(12 12 18 / 0), var(--well)); }
#main .x-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 16%; pointer-events: none; z-index: 1; background: linear-gradient(180deg, transparent, rgb(8 8 13 / .55)); border-radius: inherit; }
/* modulify: soft two-colour aura around the one panel that matters (purchase) */
#main .purchase { box-shadow: 0 0 0 1px rgb(143 166 255 / .22), -40px 30px 90px -50px rgb(79 123 255 / .55), 40px 40px 90px -50px rgb(187 163 255 / .45), var(--shadow-raised-arc); }
/* designspells: small delight on the brandmark */
.brandmark { transition: transform var(--m-base, .3s) var(--m-spring, ease), box-shadow var(--m-base, .3s) ease; }
.brand:hover .brandmark { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 26px rgb(187 163 255 / .7); }
@media (prefers-reduced-motion: reduce) { .brand:hover .brandmark { transform: none; } }
/* landdding / searchsystem: stats strip labels as letter-spaced index labels */
#main .hero-prices dt { letter-spacing: .12em; font-size: 12px; }
.mk .mk-row > .mk-app { flex: none; width: 8.6cqw; }
.mk .mk-row > .mk-app + span { flex: 1; min-width: 0; }

/* ==========================================================================
   Round 5 — mobile: compact rhythm + one shared edge (user: 「手机排版不紧凑」「排版不整齐」)
   8px grid; one gutter (16px) for every block; desktop ≥ 900px untouched.
   ========================================================================== */
@media (max-width: 760px) {
  :root { --gutter: 16px; --m-sec: 40px; }
  /* sections: 80 → 40 */
  #main section, #main section.container, #main .tint, #main .flow, #main .check, #main .usecases, #main .support-section { padding-top: var(--m-sec) !important; padding-bottom: var(--m-sec) !important; }
  #main section.first-section { padding-bottom: var(--m-sec) !important; }
  #main section.pagehero { padding-top: 24px !important; padding-bottom: 16px !important; }
  #main section.x-hero { padding: 0 !important; }
  #main section.cta3 { padding-top: 24px !important; padding-bottom: 24px !important; }
  /* shared edge: every wrapper uses the same gutter */
  .container, #main .container, .x-stage-wrap, .p2-stage-wrap { width: calc(100% - var(--gutter) * 2) !important; max-width: none; margin-inline: auto; }
  #main .container .container { width: 100% !important; }
  /* headings: left-aligned on mobile, on one axis with the content below (hero stays centred) */
  #main .section-head, #main .section-head.x-center { text-align: left; align-items: flex-start; justify-items: start; margin-bottom: 24px !important; }
  #main .section-head > *, #main .section-head.x-center > * { margin-left: 0; margin-right: 0; text-align: left; }
  #main .section-head .plain-link { align-self: flex-start; margin-top: 8px; }
  #main h2 { margin-top: 0; }
  #main h2 + p, #main h2 + .lede, #main .section-head p { margin-top: 12px; }
  /* hero head: 28/32 → 16/24, lede 28 → 16, actions 30 → 24 */
  #main .x-hero-head { padding: 16px 0 24px !important; }
  #main .x-badge { margin-bottom: 16px !important; }
  #main .x-hero .hero-kicker { margin-bottom: 8px !important; }
  #main .x-hero .lede, #main .p2-head .lede, #main .pagehero .lede { margin-top: 16px !important; }
  #main .actions, #main .x-hero .actions { margin-top: 24px !important; gap: 8px !important; }
  #main .actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  #main .actions .button { width: 100%; min-height: 48px; justify-content: center; }
  #main .x-hero .hero-contact, #main .x-hero .contact-line { margin-top: 16px !important; }
  /* hero stage: tidy composition — phone centred, the two cards in an equal 2-up row below */
  #main .x-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto !important; padding: 24px 8px 8px; border-radius: 24px; }
  #main .x-stage .hero-image { position: relative !important; inset: auto; grid-column: 1 / -1; order: 0; height: 384px; overflow: hidden; }
  #main .x-stage .hero-image .mk-phone.home-shot { top: 0 !important; width: 208px !important; }
  #main .x-stage .hero-image::after { content: ""; display: block; position: absolute; inset: auto 0 0; height: 96px; z-index: 3; background: linear-gradient(180deg, transparent, rgb(12 12 20 / .96)); pointer-events: none; }
  #main .x-stage .hero-image figcaption { left: 8px; bottom: 8px; z-index: 4; }
  #main .x-stage::after { display: none; }
  #main .x-stage .x-float { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; width: auto !important; order: 1; padding: 6px; border-radius: 18px; }
  #main .x-stage .x-float--right { order: 2; }
  #main .x-float-top { padding: 4px 4px 8px; font-size: 13px; gap: 6px; }
  #main .x-float-top em { font-size: 11px; }
  #main .x-float-art { aspect-ratio: 1 / 1; border-radius: 13px; }
  /* small-card legibility: drop micro text, enlarge what stays */
  #main .x-float .mk-sheet .mk-sub { display: none !important; }
  #main .x-float .mk-sheet .mk-h { font-size: 9cqw !important; }
  #main .x-float .mk-btn { height: 14cqw !important; font-size: 6.4cqw !important; }
  #main .mk-float-multi .mk-fclock { font-size: 16cqw; }
  #main .mk-float-multi .mk-fclock small { font-size: 6cqw; }
  #main .mk-float-multi .mk-fgrid { gap: 5cqw 3cqw; bottom: 6cqw; }
  #main .mk-float-multi .mk-app { width: 19cqw; height: 19cqw; }
  #main .mk-float-multi .f .n { display: none; }
  /* price strip: three equal cells, shared baseline, centred dividers */
  #main .x-price-row { padding-top: 16px !important; gap: 16px !important; }
  #main .x-price-row .hero-prices { display: grid !important; grid-template-columns: repeat(3, 1fr); width: 100%; padding: 12px 0; }
  #main .x-price-row .hero-prices > div { display: grid; grid-template-rows: auto auto; align-content: end; justify-items: center; padding: 0 4px !important; text-align: center; border-left: 1px solid var(--line); }
  #main .x-price-row .hero-prices > div:first-child { border-left: 0; }
  #main .x-price-row .hero-prices dt { font-size: 11px; line-height: 16px; margin: 0 0 4px; }
  #main .x-price-row .hero-prices dd { margin: 0; line-height: 32px; font-size: 26px; white-space: nowrap; }
  #main .x-price-row .value-strip { display: grid !important; grid-template-columns: 1fr; gap: 8px; width: 100%; padding: 12px 16px; justify-items: start; text-align: left; }
  #main .x-price-row .value-strip span { font-size: 13px; line-height: 20px; }
  /* marquee: 72 → 32 */
  #main .x-marquee { margin-top: 32px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  /* cards: one column, equal gaps, padding 22–28 → 16–20 */
  #main .service-grid, #main .x-bento, #main .usecase-grid, #main .more-grid, #main .feature-grid, #main .plan-cards, #main .process-grid { gap: 12px !important; }
  #main .card-body, #main .x-bento .x-wide .card-body { padding: 16px 16px 20px !important; }
  #main .card-body .price { margin-top: 16px !important; }
  #main .card-body p { margin-top: 8px; }
  #main .card-body .card-end { margin-top: 16px !important; }
  #main .card-scene { height: 224px !important; margin-top: 0 !important; }
  #main .card-scene .mk-phone.x-phone { width: 168px !important; top: 24px !important; }
  #main .offer, #main .package, #main .usecases article, #main .features article, #main .assure, #main .check, #main .spec-card, #main .compat li, #main .process-grid article { padding: 16px !important; }
  #main .feature-art, #main .story-art { margin-bottom: 12px; }
  /* product pages */
  #main .p2-head { padding: 16px 0 16px !important; }
  #main .p2-stage-wrap { margin-top: 0; }
  #main .p2-stage .hero-shot .mk-phone { width: 216px; }
  #main .stories { margin-top: 24px !important; gap: 24px !important; }
  #main .more-head h3 { margin-top: 32px !important; margin-bottom: 16px !important; }
  #main .container.benefits { margin-top: 24px !important; }
  #main .reading article, #main article.on { margin-top: 24px !important; }
  #main .purchase { padding: 16px !important; }
  /* FAQ + forms on one axis */
  #main details, #main .faq-list details { padding: 0 16px !important; }
  #main summary { min-height: 52px; padding: 14px 0 !important; display: flex; align-items: center; }
  #main details > :not(summary) { margin-left: 0 !important; padding-left: 0 !important; }
  #main .contact-layout { gap: 16px !important; }
  #main .contact-layout form, #main .contact-layout #inquiry, #main .contact-side { padding: 16px !important; }
  #main form label { display: block; margin: 0 0 6px; }
  #main form input, #main form select, #main form textarea { width: 100%; margin: 0; min-height: 48px; }
  /* CTA panel: 36/24 → 24/16, radius 20 */
  #main .cta3 .contact-banner { padding: 24px 16px !important; border-radius: 20px !important; gap: 16px !important; text-align: left; }
  #main .cta3 .cta3-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  #main .cta3 .cta3-actions > * { width: 100%; min-height: 48px; justify-content: center; }
  /* footer: 64/48 → 32/32, wordmark 88px → 56px */
  .site-footer.f3 { margin-top: 32px !important; }
  .f3 .f3-inner { padding-top: 32px !important; }
  .f3 .f3-top { gap: 24px !important; }
  .f3 .f3-cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 16px !important; }
  .f3 .f3-col, .f3 .footer-contact { text-align: left; align-items: flex-start; }
  .f3 .footer-mark { margin-top: 24px !important; font-size: 64px !important; line-height: .8; text-align: left; }
  .f3 .footer-bottom { padding-top: 16px !important; padding-bottom: 16px !important; gap: 8px; text-align: left; justify-content: flex-start; align-items: flex-start; }
}
@media (max-width: 380px) { #main .x-price-row .hero-prices dd { font-size: 23px; } }
/* Round 5 — mobile: no "card inside the page" chrome (user: 「去掉边框再试试」).
   Outer panels/stages lose stroke + fill and sit on the canvas; light comes from a soft glow only.
   Kept: phone bezels, buttons, fields, plan picker, FAQ rows, menu pill, purchase box. */
@media (max-width: 760px) {
  #main .x-stage, #main .p2-stage, #main .mk-stage, #main .story-art .mk-stage,
  #main .service-card, #main .scene-card, #main .spec-card, #main .card-scene, #main .feature-art, #main .story-art,
  #main .feature-art .mk-panel, #main .ios-shot-wrap .mk-panel, #main .howto .mk-panel.land, #main .mk-panel,
  #main .usecases article, #main .features article, #main .more-grid > *, #main .howto li, #main .plan-cards li, #main .assure, #main .split-copy > div:last-child .lede + * {
    border-color: transparent !important; box-shadow: none !important; }
  #main .card-scene::after, #main .x-stage::before { box-shadow: none !important; }
  #main .service-card, #main .scene-card, #main .spec-card, #main .usecases article, #main .features article, #main .more-grid > *, #main .howto li, #main .plan-cards li {
    background: transparent !important; border-radius: 0 !important; }
  #main .service-card:hover, #main .guide-row:hover { box-shadow: none !important; }
  /* stages: one continuous dark surface lit from below — no outline, no box edge */
  #main .x-stage, #main .p2-stage, #main .card-scene, #main .mk-stage, #main .mk-panel {
    background: radial-gradient(70% 55% at 50% 60%, rgb(109 79 232 / .20), transparent 70%), radial-gradient(60% 40% at 50% 10%, rgb(79 123 255 / .12), transparent 70%) !important; }
  #main .x-stage, #main .p2-stage { padding-left: 0 !important; padding-right: 0 !important; border-radius: 0 !important; overflow: visible; }
  #main .p2-stage { padding-top: 8px !important; padding-bottom: 0 !important; gap: 24px !important; }
  #main .card-scene { border-radius: 0 !important; }
  #main .x-orbit, #main .p2-stage::before { display: none; }
  #main .card-body, #main .x-bento .x-wide .card-body { padding: 16px 0 0 !important; }
  #main .service-card + .service-card, #main .x-bento > * + * { margin-top: 24px; }
  #main .usecases article, #main .features article, #main .more-grid > *, #main .howto li, #main .plan-cards li { padding-left: 0 !important; padding-right: 0 !important; }
  #main .x-stage .x-float { background: rgb(17 17 24 / .72) !important; border-color: transparent !important; box-shadow: 0 16px 40px -20px rgb(0 0 0 / .9) !important; }
}
@media (max-width: 760px) {
  #main .section-head > div { align-items: flex-start !important; text-align: left !important; }
  #main .card-scene::after { background: linear-gradient(180deg, rgb(8 8 13 / 0), #08080D) !important; }
  #main .x-stage .hero-image::after { background: linear-gradient(180deg, rgb(8 8 13 / 0), #08080D) !important; }
  #main .x-stage .hero-image figcaption { display: none; }
  #main figure.hero-shot, #main figure.hero-shot.p2-card, #main .p2-stage .p2-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  #main .x-price-row > *, #main .fit-note, #main .p2-head .notice { border-color: transparent !important; }
}

/* ==========================================================================
   Round 5 — motion that is visible on touch phones (no cursor needed).
   transform / opacity only; loops pause off-screen (.off) or are tiny compositor
   layers; everything below is gated on prefers-reduced-motion: no-preference.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 1. CSS aurora — the phone stand-in for the WebGL shader (desktop shader paints over it) */
  #main .x-stage { overflow: hidden; }
  #main .x-stage::before { content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none; will-change: transform;
    background: radial-gradient(42% 34% at 28% 26%, rgb(79 123 255 / .55), transparent 70%), radial-gradient(38% 34% at 72% 62%, rgb(139 92 246 / .50), transparent 70%), radial-gradient(32% 26% at 50% 92%, rgb(109 79 232 / .40), transparent 70%);
    animation: aurora 8s ease-in-out infinite alternate; }
  #main .x-stage.off::before, #main .p2-stage-wrap.off::before { animation-play-state: paused; }
  @keyframes aurora { 0% { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(6%, 4%, 0) rotate(10deg) scale(1.1); } 100% { transform: translate3d(-2%, 7%, 0) rotate(-8deg) scale(1.04); } }
  /* 2. gentle continuous float on hero phones (bezel layer, so intro/parallax transforms stay intact) */
  #main .x-stage .hero-image .mk-bezel, #main .p2-stage .hero-shot .mk-bezel { animation: bob 4s ease-in-out infinite; will-change: translate; }
  @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }
  @keyframes bob-sm { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
  /* desktop floats also keep bobbing after the intro, so motion is visible on a Mac */
  @media (min-width: 761px) {
    #main .x-stage .x-float--left { animation: intro-float-l var(--m-story) var(--m-ease) 760ms both, bob-sm 4.5s ease-in-out 1.6s infinite; }
    #main .x-stage .x-float--right { animation: intro-float-r var(--m-story) var(--m-ease) 860ms both, bob-sm 4.5s ease-in-out 2.4s infinite; }
  }
  /* 3. breathing glow on the primary CTAs (opacity of a glow layer, not a strobe) */
  #main .x-hero .actions .button:not(.secondary), #main .purchase-consult, #main .cta3 .button:not(.secondary), .dock .dock-copy { position: relative; isolation: isolate; }
  #main .x-hero .actions .button:not(.secondary)::after, #main .purchase-consult::after, #main .cta3 .button:not(.secondary)::after, .dock .dock-copy::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 24px 3px rgb(124 108 255 / .6), 0 0 2px 1px rgb(143 166 255 / .5);
    opacity: .35; animation: breathe 2.4s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  /* 4. marquee keeps scrolling after a tap on touch screens (sticky :hover) */
  @media (hover: none) { .x-marquee:not(.off):hover .x-marquee-track { animation-play-state: running; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  /* floating cards on phones: intro once, then a small out-of-phase bob */
  #main .x-stage .x-float--left { animation: intro-up var(--m-slow) var(--m-ease) 700ms both, bob-sm 4s ease-in-out 1.2s infinite !important; }
  #main .x-stage .x-float--right { animation: intro-up var(--m-slow) var(--m-ease) 820ms both, bob-sm 4s ease-in-out 2s infinite !important; }
  #main .card-scene .mk-phone.x-phone .mk-bezel { animation: bob-sm 4s ease-in-out infinite; }
  #main .scene-card:nth-child(2n) .card-scene .mk-bezel { animation-delay: -3s; }
  /* product hero aurora */
  #main .p2-stage-wrap { position: relative; isolation: isolate; overflow: hidden; }
  #main .p2-stage-wrap::before { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none; will-change: transform;
    background: radial-gradient(44% 30% at 30% 30%, rgb(79 123 255 / .48), transparent 70%), radial-gradient(40% 30% at 70% 72%, rgb(139 92 246 / .46), transparent 70%);
    animation: aurora 8s ease-in-out infinite alternate; }
  /* reveals: a clearer 32px rise on phones, still quick */
  html.reveal-on .rv:not(.in) { translate: 0 32px; filter: none; }
  html.reveal-on .rv { transition-duration: .7s, .7s, .7s; }
  /* border beam a touch brighter on dark phone screens */
  .beam > .beam-line { padding: 1.5px; animation-duration: 5.5s;
    background: conic-gradient(from var(--beam), transparent 0 70%, rgb(143 166 255 / .25) 76%, #A9B8FF 88%, #C2A6FF 95%, transparent 100%); }
}
@media (max-width: 760px) {
  #main .story, #main .compat-layout > *, #main .compat li, #main .spec-grid > *, #main .about-facts article, #main .policy-section article { border-color: transparent !important; box-shadow: none !important; }
  #main .story { background: transparent !important; border-radius: 0 !important; padding: 0 !important; }
  #main .story-copy { padding: 16px 0 0 !important; }
  #main .p2-head .fit-note, #main .p2-head .notice { text-align: center; justify-content: center; margin-inline: auto; }
}
@media (max-width: 760px) { #main section.phero.p2 { padding-top: 0 !important; padding-bottom: 24px !important; } }

/* ==========================================================================
   Round 5 — studio-grade device frames + in-screen polish.
   iPhone: titanium rim, thin black border, Dynamic Island, side buttons, soft contact shadow.
   Android: graphite rim, centred punch-hole, gesture bar. Still 9:19.5, all vector.
   ========================================================================== */
.mk-phone { isolation: isolate; }
.mk-bezel { padding: 1.15cqw; border-radius: 15.5cqw;
  background: linear-gradient(135deg, #8E8E98 0%, #3B3C45 18%, #1E1F26 46%, #4A4B55 78%, #A4A4AE 100%);
  box-shadow: inset 0 0 0 .25cqw rgb(255 255 255 / .35), inset 0 0 0 .55cqw rgb(0 0 0 / .55), 0 2cqw 4cqw -1cqw rgb(0 0 0 / .7), 0 12cqw 26cqw -10cqw rgb(98 92 246 / .42); }
.mk-screen { border-radius: 14.3cqw; box-shadow: 0 0 0 1.7cqw #030305; }
.mk-phone .mk-bezel::before { content: ""; position: absolute; inset: 1.15cqw; border-radius: 14.3cqw; box-shadow: inset 0 0 0 1.8cqw #030305; z-index: 10; pointer-events: none; }
/* glass sheen */
.mk-phone .mk-screen::after { background: linear-gradient(115deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / 0) 28%, rgb(255 255 255 / 0) 100%); box-shadow: none; z-index: 11; }
/* side buttons */
.mk-phone::before, .mk-phone::after { content: ""; position: absolute; z-index: -1; border-radius: .6cqw; background: linear-gradient(90deg, #2A2B33, #7C7D86 50%, #2A2B33); }
.mk-phone::before { left: -.7cqw; top: 19%; width: 1.1cqw; height: 6%; box-shadow: 0 11cqw 0 0 #4A4B55, 0 23cqw 0 0 #4A4B55; }
.mk-phone::after { right: -.7cqw; top: 27%; width: 1.1cqw; height: 11%; }
/* contact shadow (studio floor) */
.mk-bezel::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -5cqw; height: 6cqw; border-radius: 50%; z-index: -2; background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent); filter: blur(2cqw); pointer-events: none; }
.mk-panel .mk-bezel::after { display: none; }
/* Dynamic Island + punch-hole */
.mk-island { top: 3cqw; width: 30cqw; height: 8.6cqw; background: #000; box-shadow: inset 0 0 0 .3cqw #0B0B0F; }
.mk-island::after { content: ""; position: absolute; right: 4.2cqw; top: 50%; width: 3cqw; height: 3cqw; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2A3A6A, #050510 70%); }
.mk-hole { top: 3.4cqw; width: 4.4cqw; height: 4.4cqw; background: radial-gradient(circle at 40% 40%, #1E2A50, #000 70%); box-shadow: 0 0 0 .5cqw #050507; }
/* Android: graphite rim, gesture bar instead of 3 keys */
.mk-phone:not(.mk-ios) .mk-bezel { border-radius: 12.5cqw; background: linear-gradient(135deg, #5C5E68 0%, #23242B 22%, #15161B 55%, #2E2F37 82%, #6A6C76 100%); }
.mk-phone:not(.mk-ios) .mk-screen, .mk-phone:not(.mk-ios) .mk-bezel::before { border-radius: 11.4cqw; }
.mk-navbar i { display: none; }
.mk-navbar::after { content: ""; width: 32cqw; height: 1.3cqw; border-radius: 99px; background: rgb(255 255 255 / .72); }
.mk-navbar { justify-content: center; height: 7cqw; }
/* status bar: real proportions */
.mk-status { height: 13cqw; padding: 0 8.5cqw 0 10cqw; font-size: 4.3cqw; font-weight: 600; letter-spacing: -.01em; }
.mk-status b { font-weight: 600; }
.mk-status svg { width: 18cqw; height: 3.8cqw; }
.mk-homebar { width: 35cqw; height: 1.3cqw; bottom: 2.2cqw; background: rgb(255 255 255 / .8); }
/* in-screen polish: confident type, generous padding, solid CTA */
.mk-sheet { left: 3cqw; right: 3cqw; bottom: 8.5cqw; padding: 3.6cqw 6cqw 6cqw; border-radius: 9cqw; background: rgb(18 19 27 / .92); }
.mk-ios .mk-sheet { bottom: 6cqw; }
.mk-h { font-size: 6.6cqw; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.mk-h.xl { font-size: 9cqw; }
.mk-sub { font-size: 3.7cqw; margin-top: 1.6cqw; }
.mk-btn { height: 12.6cqw; font-size: 4.3cqw; font-weight: 650; }
.mk-btns { gap: 3cqw; margin-top: 5.4cqw; }
.mk-seg { font-size: 3.7cqw; border-radius: 4cqw; margin-bottom: 5cqw; }
.mk-seg span { padding: 2.5cqw 0; border-radius: 3.2cqw; }
.mk-search { top: 15cqw; height: 11.6cqw; font-size: 4cqw; font-weight: 500; left: 5cqw; right: 5cqw; }
.mk-page { padding: 4cqw 6cqw 0; }
.mk-head { font-size: 7.4cqw; font-weight: 700; letter-spacing: -.02em; margin: 2cqw 0 5cqw; }
.mk-row { min-height: 12.6cqw; padding: 2.6cqw 4.2cqw; font-size: 3.9cqw; }
.mk-label { font-size: 3.2cqw; margin: 4.4cqw 1.6cqw 2cqw; }
.mk-tile b { font-size: 5cqw; }
.mk-pin .ring { box-shadow: inset 0 0 0 .4cqw rgb(169 184 255 / .7), 0 0 10cqw rgb(109 79 232 / .35); }
.mk-pin .dot { width: 7.6cqw; height: 7.6cqw; left: -3.8cqw; top: -3.8cqw; box-shadow: 0 0 0 1.3cqw #fff, 0 1.6cqw 3cqw rgb(0 0 0 / .6), 0 0 8cqw 2cqw rgb(109 79 232 / .85); }
.mk-map::after { background: linear-gradient(180deg, rgb(10 11 19 / .7) 0%, rgb(10 11 19 / 0) 20%, rgb(10 11 19 / 0) 58%, rgb(10 11 19 / .55) 100%); }
/* phones sit on the page: no outline around the hero stages at any width; edges dissolve */
#main .x-stage, #main .p2-stage { border-color: transparent !important; box-shadow: none !important; }
@media (min-width: 761px) {
  #main .x-stage { -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 40%, #000 62%, transparent 100%); }
  #main .x-stage .hero-image .mk-phone.home-shot { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
}
@media (max-width: 760px) {
  button.menu, #main .text-button, .f3-up, .site-footer .text-button { min-height: 44px; display: inline-flex; align-items: center; }
  button.menu { min-width: 44px; }
}
/* 60fps.design study: product phones on mobile cards presented as a slightly turned studio object */
@media (max-width: 760px) {
  #main .card-scene { perspective: 900px; }
  #main .card-scene .mk-phone.x-phone { transform: translateX(-50%) rotateY(-9deg) rotateX(3deg) !important; transform-origin: 50% 0; }
}

/* ==========================================================================
   Round 6 — home hero type + swipeable marquees
   (user: 「排版比较low」「1小时先试用放在最上面」「定位打卡多开不适合放在上面」「这两行无法左右滑动」)
   ========================================================================== */
/* hero: headline first, quiet supporting lines */
#main .x-hero h1 { margin-top: 0; letter-spacing: -.04em; line-height: 1.06; text-wrap: balance; }
#main .x-hero h1 .h-sub { display: inline-block; margin-top: .06em; }
#main .x-hero .lede { max-width: 26em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; letter-spacing: .01em; }
#main .x-hero .lede .keep { white-space: nowrap; color: var(--ink); }
#main .x-hero .hero-trial { margin: 18px 0 0; font-size: 13.5px; line-height: 1.5; letter-spacing: .02em; color: var(--muted); }
#main .x-hero .hero-trial a { color: inherit; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .22); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
#main .x-hero .hero-trial a:hover, #main .x-hero .hero-trial a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
#main .x-hero .hero-trial + .hero-contact { margin-top: 8px; }
@media (max-width: 760px) {
  #main .x-hero-head { padding: 28px 0 24px !important; }
  #main .x-hero h1 { font-size: clamp(38px, 10.8vw, 46px); line-height: 1.08; }
  #main .x-hero .lede { margin-top: 14px !important; font-size: 15.5px; line-height: 1.65; max-width: none; }
  #main .x-hero .actions { margin-top: 22px !important; }
  #main .x-hero .hero-trial { margin-top: 14px; font-size: 13px; }
  #main .x-hero .hero-trial + .hero-contact { margin-top: 6px !important; font-size: 13.5px; }
}

/* marquees on touch: a real horizontal strip you can swipe.
   Desktop (hover + fine pointer) keeps the CSS loop and hover-to-pause above. */
.x-marquee::-webkit-scrollbar { display: none; }
@media not all and (hover: hover) and (pointer: fine) {
  .x-marquee {
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    touch-action: pan-x pan-y; /* horizontal swipes scroll the strip, vertical ones still scroll the page */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .x-marquee .x-marquee-track, .x-marquee:hover .x-marquee-track, .x-marquee.off .x-marquee-track { animation: none !important; transform: none !important; }
  .x-marquee-track { padding-inline: 16px; }
}

#main .x-hero .hero-sum { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 18px 0 0; padding: 0; font-size: 15px; line-height: 1.6; letter-spacing: .04em; color: var(--soft); }
#main .x-hero .hero-sum span::before { content: "·"; margin: 0 11px; color: var(--faint); }
@media (max-width: 760px) {
  #main .x-hero .hero-sum { margin-top: 16px; font-size: 14px; letter-spacing: .03em; }
  #main .x-hero-head { padding-bottom: 8px !important; }
}

/* ==========================================================================
   Round 7 — app adaptations (特别适配 / 其它适配) + 4-column launcher grids
   ========================================================================== */
#main .x-adapt { text-align: center; }
#main .x-adapt-label { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: #9DB0FF; }
#main .x-adapt--top { padding-top: 40px; padding-bottom: 6px; }
#main .x-adapt-apps { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 44px; margin: 0; padding: 0; list-style: none; }
#main .x-adapt-apps li { display: inline-flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: rgb(255 255 255 / .92); }
#main .x-adapt-apps img { flex: none; width: 60px; height: 60px; border-radius: 15px; box-shadow: 0 10px 30px -10px rgb(109 79 232 / .75), 0 0 0 1px rgb(255 255 255 / .08); }
#main .x-adapt--top + .x-marquee--logos { margin-top: 18px !important; }
#main .x-adapt--bottom { padding-top: 18px; padding-bottom: 8px; }
#main .x-adapt-list { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; font-size: 14px; line-height: 2; color: rgb(255 255 255 / .62); }
#main .x-adapt-list span { white-space: nowrap; }
#main .x-adapt-list { gap: 2px 22px; line-height: 1.85; }
#main .x-adapt-note { margin: 10px 0 0; font-size: 12px; color: rgb(255 255 255 / .38); }
#main .x-adapt--page { text-align: left; margin-top: 28px; }
#main .x-adapt--page .x-adapt-apps, #main .x-adapt--page .x-adapt-list { justify-content: flex-start; margin: 0; }
#main .x-adapt--page .x-adapt-more { margin-top: 30px; }
@media (max-width: 760px) {
  #main .x-adapt--top { padding-top: 28px; padding-bottom: 0; }
  #main .x-adapt-label { margin-bottom: 10px; font-size: 11px; }
  #main .x-adapt-apps { gap: 12px 26px; }
  #main .x-adapt-apps li { gap: 10px; font-size: 15px; }
  #main .x-adapt-apps img { width: 48px; height: 48px; border-radius: 12px; }
  #main .x-adapt--top + .x-marquee--logos { margin-top: 14px !important; }
  #main .x-adapt--bottom { padding-top: 12px; }
  #main .x-adapt-list { font-size: 13px; line-height: 1.95; }
  #main .x-adapt-list { gap: 1px 16px; line-height: 1.8; }
  #main .x-adapt-note { font-size: 11.5px; margin-top: 6px; }
  #main .x-adapt--page { margin-top: 20px; }
  #main .x-adapt--page .x-adapt-more { margin-top: 22px; }
}
/* phone launcher: 4 across like a real home screen */
.mk-grid { left: 6cqw; right: 6cqw; top: 52cqw; grid-template-columns: repeat(4, 1fr); gap: 6.4cqw 2cqw; }
.mk-grid figure { gap: 1.8cqw; font-size: 3.2cqw; }
.mk-grid .mk-app { width: 14.6cqw; height: 14.6cqw; }
#main .mk .mk-grid .mk-app img, .mk-grid .mk-app img { border-radius: 3.8cqw !important; }
.mk-grid .mk-badge { min-width: 5.2cqw; height: 5.2cqw; font-size: 3cqw; right: -1.3cqw; bottom: -1.3cqw; padding: 0 .9cqw; }
.mk-float-multi .mk-fgrid { left: 5cqw; right: 5cqw; grid-template-columns: repeat(4, 1fr); gap: 3cqw 1.5cqw; }
.mk-float-multi .mk-app { width: 11cqw; height: 11cqw; }
#main .mk-float-multi .mk-app img { border-radius: 2.9cqw !important; }
.mk-float-multi .f { font-size: 3.2cqw; }
.mk-float-multi .mk-badge { min-width: 4.2cqw; height: 4.2cqw; padding: 0 .7cqw; font-size: 2.6cqw; right: -1cqw; bottom: -1cqw; box-shadow: 0 0 0 .6cqw #16164a; }
@media (max-width: 760px) {
  #main .mk-float-multi .mk-fgrid { left: 6cqw; right: 6cqw; gap: 5cqw 3cqw; bottom: 7cqw; }
  #main .mk-float-multi .mk-app { width: 17cqw; height: 17cqw; }
  #main .mk-float-multi .mk-app img { border-radius: 4.4cqw !important; }
  #main .mk-float-multi .mk-badge { min-width: 5.6cqw; height: 5.6cqw; font-size: 3.4cqw; right: -1.2cqw; bottom: -1.2cqw; box-shadow: 0 0 0 .8cqw #16164a; }
}

/* Round 8 — 其它适配 as 弹幕 tracks (three rows, alternating direction, different speeds) */
#main .x-danmaku { display: grid; gap: 2px; margin: 0 auto; max-width: 1100px; }
#main .x-marquee.x-marquee--adapt { margin: 0 !important; padding: 5px 0 !important; border: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
#main .x-marquee--adapt .x-marquee-row span { gap: 0; padding-right: 30px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: rgb(255 255 255 / .64) !important; }
#main .x-marquee--adapt .x-marquee-row span::after, #main .x-marquee--adapt .x-marquee-row span::before { display: none !important; }
#main .x-marquee--adapt-1 .x-marquee-track { animation-duration: 60s; animation-delay: -9s; }
#main .x-marquee--adapt-2 .x-marquee-track { animation-direction: reverse; animation-duration: 42s; animation-delay: -21s; }
#main .x-marquee--adapt-2 .x-marquee-row span { color: rgb(196 206 255 / .78) !important; padding-right: 38px; }
#main .x-marquee--adapt-3 .x-marquee-track { animation-duration: 74s; animation-delay: -33s; }
#main .x-marquee--adapt-3 .x-marquee-row span { padding-right: 24px; color: rgb(255 255 255 / .5) !important; }
#main .x-adapt-more .x-adapt-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#main .x-adapt--page .x-danmaku { margin: 0; max-width: none; }
#main .x-adapt--page .x-marquee.x-marquee--adapt { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
@media (max-width: 760px) {
  #main .x-marquee.x-marquee--adapt { padding: 4px 0 !important; }
  #main .x-marquee--adapt .x-marquee-row span { font-size: 13.5px; padding-right: 22px; }
  #main .x-marquee--adapt-2 .x-marquee-row span { padding-right: 28px; }
  #main .x-marquee--adapt-3 .x-marquee-row span { padding-right: 18px; }
  #main .x-danmaku { gap: 0; margin-inline: -16px; }
  #main .x-adapt--page .x-danmaku { margin-inline: -16px; }
  #main .x-adapt--page .x-marquee.x-marquee--adapt { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent); }
}
/* reduced motion: tracks stop, so show the plain wrapped list instead */
@media (prefers-reduced-motion: reduce) {
  #main .x-danmaku { display: none; }
  #main .x-adapt-more .x-adapt-list { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}

/* Round 9 — usecases moved to guides.html, support intro moved to support.html:
   one natural gap between the moved block and the page's own list (desktop 240px → 80px) */
#main .usecases.first-section, #main .support-section.first-section { padding-bottom: 80px !important; }
#main .usecases.first-section + .guide-search-section, #main .support-section.first-section + .process-after-intro { padding-top: 0 !important; }
@media (max-width: 760px) {
  #main .usecases.first-section, #main .support-section.first-section { padding-bottom: 36px !important; }
}

/* Round 10 — support notes on product pages (no card frames: hairline rows on black) */
#main .x-notes-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 28px 56px; align-items: start; }
#main .x-notes-head h2 { max-width: none; font-size: clamp(28px, 2.9vw, 40px); }
#main .x-notes-lede { margin: 16px 0 0; max-width: 24em; font-size: 15.5px; line-height: 1.75; color: var(--soft); }
#main .x-notes-date { display: block; margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--faint); }
#main .x-notes-list { margin: 0; display: grid; }
#main .x-notes-list > div { display: grid; grid-template-columns: minmax(8em, .42fr) minmax(0, 1fr); gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--line); }
#main .x-notes-list > div:last-child { border-bottom: 1px solid var(--line); }
#main .x-notes-list dt { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.55; color: #B9C4FF; }
#main .x-notes-list dd { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--soft); }
#main .x-notes-sub { margin: 30px 0 12px; font-size: 17px; font-weight: 600; color: var(--ink, #EDEDF2); }
#main .x-notes-body > .x-notes-sub:first-child { margin-top: 0; }
#main .x-notes-p { margin: 0; max-width: 38em; font-size: 15.5px; line-height: 1.75; color: var(--soft); }
#main .x-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
#main .x-vs > div { padding-top: 16px; border-top: 1px solid var(--line); }
#main .x-vs h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; background: linear-gradient(90deg, #8FA6FF, #BBA3FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#main .x-vs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
#main .x-vs li { position: relative; padding-left: 16px; font-size: 15.5px; line-height: 1.65; color: var(--soft); }
#main .x-vs li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #8FA6FF, #BBA3FF); box-shadow: 0 0 8px rgb(143 166 255 / .6); }
#main .x-notes-close { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 600; color: var(--ink, #EDEDF2); }
#main .x-pointer { margin-top: 12px; font-size: 15px; color: var(--soft); }
#main .x-notes + .x-notes { padding-top: 0; }
#main .x-notes + .x-after-notes .article-body article:first-child { border-top: 1px solid var(--line); padding-top: 26px; }
@media (max-width: 760px) {
  #main .x-notes-layout { grid-template-columns: 1fr; gap: 16px; }
  #main .x-notes-lede { margin-top: 10px; font-size: 14.5px; }
  #main .x-notes-list > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  #main .x-notes-list dt, #main .x-notes-list dd, #main .x-notes-p, #main .x-vs li { font-size: 14.5px; }
  #main .x-notes-sub { margin: 22px 0 8px; font-size: 16px; }
  #main .x-vs { grid-template-columns: 1fr; gap: 18px; }
  #main .x-notes + .x-notes { padding-top: 8px !important; }
}

/* ==========================================================================
   Round 11 — contacts: WeChat copies, WhatsApp / Telegram open (footer, dock, inline)
   ========================================================================== */
.f3 .footer-contact { gap: 10px; }
.f3 .footer-contact .fc-link { display: flex !important; align-items: baseline; gap: 10px; width: auto; min-height: 0; margin: 0; padding: 2px 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; font: inherit; font-size: 15px; color: var(--on-ink-muted); text-align: left; cursor: pointer; text-decoration: none; }
.f3 .footer-contact .fc-link > span { flex: none; width: 5.4em; }
.f3 .footer-contact .fc-link span { color: var(--on-ink-muted); }
.f3 .footer-contact .fc-link strong { color: var(--on-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(143 166 255 / .45); text-underline-offset: 4px; }
.f3 .footer-contact .fc-link em { font-style: normal; font-size: 12px; color: #9DB0FF; }
.f3 .footer-contact .fc-link:hover strong { color: #B9C4FF; text-decoration-color: #8FA6FF; }
/* dock: three (or four) tap targets */
@media (max-width: 768px) {
  .dock { gap: 5px !important; }
  .dock button, .dock a { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 8px !important; font-size: 12.5px !important; overflow: hidden; text-overflow: ellipsis; }
  .dock .dock-copy { flex-grow: 1.7 !important; }
  .dock .dock-tg, .dock a.dock-tg { background: rgb(255 255 255 / .06) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
  .dock.dock--4 .dock-copy { flex-grow: 1.45 !important; }
  .dock.dock--4 button, .dock.dock--4 a { padding: 0 6px !important; font-size: 12px !important; }
}
/* inline contact rows (about, android consult block) */
#main .contact-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
#main .contact-inline .inline-link { white-space: nowrap; }
#main .id-copy { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: rgb(143 166 255 / .45); text-underline-offset: 4px; cursor: pointer; }
#main .id-copy:hover { color: #B9C4FF; }
/* contact page: the ID itself is the tap target */
#main .contact-id .id-big { padding: 0; border: 0; background: none; font: inherit; font-size: 18px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; color: var(--ink); text-decoration: underline; text-decoration-color: rgb(143 166 255 / .45); text-underline-offset: 5px; cursor: pointer; }
#main .contact-id .id-big:hover { color: #B9C4FF; text-decoration-color: #8FA6FF; }

/* Round 11 — inner-page typography: one left axis, calmer heading scale */
#main section.pagehero:not(:has(+ .container.actions)):not(:has(+ section .service-grid)) { align-items: flex-start; text-align: left; }
#main section.pagehero:not(:has(+ .container.actions)):not(:has(+ section .service-grid)) h1 { margin-inline: 0; max-width: 15em; }
#main section.pagehero:not(:has(+ .container.actions)):not(:has(+ section .service-grid)) .lede { margin: 22px 0 0; max-width: 34em; text-align: left; }
#main section.pagehero:has(+ section.reading) { max-width: 1040px; margin-inline: auto; }
@media (max-width: 1099px) { #main section.pagehero:has(+ section.reading) { max-width: 720px; } }
#main section.reading .reading-meta { justify-content: flex-start; }
#main #guide-search { margin-inline: 0; max-width: 720px; }
/* product pages: the four pitch blocks read as sub-heads, not display titles */
#main .product-page .article-body h2 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; }
#main .product-page .article-body p { font-size: 16px; line-height: 1.8; max-width: 36em; }
#main .contact-side h2 { font-size: clamp(28px, 2.6vw, 36px); }
@media (min-width: 761px) {
  #main section.x-notes { padding-top: 80px !important; padding-bottom: 80px !important; }
  #main section.x-notes + section.x-notes { padding-top: 0 !important; }
  #main .purchase-details:has(+ .x-notes) { padding-bottom: 40px !important; }
}
@media (max-width: 760px) {
  #main section.pagehero:not(:has(+ .container.actions)):not(:has(+ section .service-grid)) .lede { margin-top: 12px; }
  #main .product-page .article-body h2 { font-size: 22px; }
  #main .product-page .article-body p { font-size: 15px; }
}
#main section.reading .reading-meta { margin-inline: 0; }
@media (min-width: 1100px) { #main section.reading.steps > .reading-meta { grid-column: 2; } }
@media (max-width: 1099px) { #main section.reading .reading-meta { margin-inline: auto; justify-content: flex-start; } }
@media (max-width: 768px) {
  .dock button, .dock a { flex: 1 1 auto !important; min-width: max-content !important; }
  .dock.dock--4 button, .dock.dock--4 a { padding: 0 7px !important; }
  .dock .dock-fit, .dock a.dock-fit { background: rgb(255 255 255 / .92) !important; color: #12121A !important; border: 1px solid rgb(255 255 255 / .9) !important; }
}
.f3 .footer-contact .fc-link { justify-content: flex-start !important; padding: 2px 0 !important; text-align: left !important; }
.f3 .footer-contact .fc-link > span { text-align: left; }
.f3 .footer-contact .fc-link::before { display: none !important; }

/* ===== Motion preview (2026-11-11) ===== */
:root { --text-grad-accent: linear-gradient(95deg, #7F98FF 0%, #A7AEFF 46%, #D2A2FF 100%); }
@property --sx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --sy { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

/* 1. Hero: filament canvas sits where the old shader sat; fine grain on top of it kills banding */
.x-stage .x-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; }
.x-stage > .x-grain { z-index: 1; }
.x-stage .x-filament { transition-duration: 1400ms; }

/* 2. Device mocks: pointer-led specular on the glass (low alpha, never hides the screen) + tilt */
#main .mk-phone.mk-gloss .mk-screen::after {
  background: radial-gradient(55% 34% at var(--sx, 30%) var(--sy, 0%), rgb(255 255 255 / calc(.04 + var(--so, 0) * .07)), rgb(255 255 255 / 0) 72%),
              linear-gradient(115deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / 0) 28%, rgb(255 255 255 / 0) 100%); }
#main .x-stage .hero-image, #main .p2-stage .hero-shot { perspective: 1400px; }
#main .mk-phone.mk-tilt { transition: rotate 120ms linear; }
@media (hover: none), (pointer: coarse) {
  @media (prefers-reduced-motion: no-preference) {
    #main .x-stage .mk-phone.mk-gloss .mk-screen::after, #main .p2-stage .mk-phone.mk-gloss .mk-screen::after, #main .card-scene .mk-phone.mk-gloss .mk-screen::after {
      background: linear-gradient(110deg, rgb(255 255 255 / 0) calc(var(--sx) - 18%), rgb(255 255 255 / .085) var(--sx), rgb(255 255 255 / 0) calc(var(--sx) + 18%)),
                  linear-gradient(115deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / 0) 28%, rgb(255 255 255 / 0) 100%);
      animation: mk-idle-sheen 9s ease-in-out 1.5s infinite; }
    #main .card-scene .mk-phone.mk-gloss .mk-screen::after { animation-delay: 4s; }
  }
}
@keyframes mk-idle-sheen { 0% { --sx: -30%; } 28% { --sx: 130%; } 100% { --sx: 130%; } }
/* pause existing loops on phones that are off-screen */
#main .mk-phone.mk-off .mk-bezel, #main .mk-phone.mk-off .mk-screen::after, #main .mk-phone.mk-off .mk-coach { animation-play-state: paused !important; }

/* 3. WeChat-clone mock: 4-column stagger + one coachmark pulse */
#main .mk-stagger > * { opacity: 0; transform: translateY(5cqw) scale(.86); }
#main .mk-stagger.mk-in > * { opacity: 1; transform: none; transition: opacity 480ms var(--m-ease, ease) var(--md, 0ms), transform 640ms cubic-bezier(.34, 1.4, .5, 1) var(--md, 0ms); }
#main .mk-app { position: relative; }
#main .mk-coach { position: absolute; inset: -1.1cqw; border-radius: 4.6cqw; pointer-events: none; box-shadow: 0 0 0 .45cqw rgb(167 178 255 / .85), 0 0 3cqw rgb(143 120 255 / .55); opacity: 0; }
#main .mk-fgrid .mk-coach { border-radius: 3.6cqw; inset: -.9cqw; }
@media (prefers-reduced-motion: no-preference) {
  #main .mk-in .mk-coach { animation: mk-coach 3.2s cubic-bezier(.3, .7, .3, 1) 1.8s infinite; }
}
@keyframes mk-coach { 0% { opacity: 0; transform: scale(.92); } 18% { opacity: 1; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(1.22); } }

/* 4. Letter roll on primary buttons */
.lr { position: relative; display: inline-flex; }
.lr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lr-l { display: inline-flex; }
.lr-c { display: inline-block; height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: top; }
.lr-c > span { display: block; height: 1.3em; transition: transform 440ms cubic-bezier(.65, 0, .25, 1) calc(var(--i) * 26ms); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button.has-lr:hover .lr-c > span, .button.has-lr:focus-visible .lr-c > span { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) { .lr-c > span { transition: none; } }

/* 5. Home H1 chunk reveal (opacity/transform only, so no layout shift) */
@media (prefers-reduced-motion: no-preference) {
  #main .x-hero h1 { animation-delay: 300ms; }
  #main .x-hero .hero-sum { animation-delay: 360ms; }
  #main .x-hero h1.wr-on { animation: none; }
  #main .x-hero h1.wr-on, #main .x-hero h1.wr-on .h-sub { background: none; }
  #main .x-hero h1.wr-on .wr { display: inline-block; background: var(--text-grad) no-repeat; background-size: var(--gw, 100%) 100%; background-position: calc(var(--gx, 0px) * -1) 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: wr-in 900ms cubic-bezier(.16, 1, .3, 1) calc(120ms + var(--wi) * 75ms) both; }
  #main .x-hero h1.wr-on .h-sub .wr { background-image: var(--text-grad-accent); }
  #main .x-hero .hero-sum.hs-on { animation: none; }
  #main .x-hero .hero-sum.hs-on > span { animation: hs-in 700ms cubic-bezier(.16, 1, .3, 1) calc(700ms + var(--hi) * 90ms) both; }
}
#main .x-hero .hero-sum > .hs-first::before { content: none; }
@keyframes wr-in { from { opacity: 0; transform: translateY(.32em); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hs-in { from { opacity: 0; transform: translateY(6px); } }

/* 6. 其它适配 danmaku: eased hover stop (JS), hovered name brightens */
#main .x-marquee.ease-pause:hover .x-marquee-track { animation-play-state: running; }
#main .x-marquee.ease-pause.off .x-marquee-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  #main .x-marquee--adapt .x-marquee-row span { transition: color 240ms ease, text-shadow 240ms ease; }
  #main .x-marquee--adapt .x-marquee-row span:hover { color: #fff !important; text-shadow: 0 0 18px rgb(143 166 255 / .6); }
}

/* 7. Footer: oversized gradient wordmark with a faint glow stroke (sitewide) */
.site-footer.f3 .footer-mark { margin: clamp(40px, 6vw, 88px) 0 clamp(10px, 1.6vw, 22px) !important; font-size: clamp(112px, 24.5vw, 380px) !important; line-height: .8 !important; letter-spacing: -.06em; text-align: center !important;
  background: linear-gradient(100deg, #5F7DFF 0%, #9EA9FF 42%, #C99BFF 78%, #E0A3FF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent; color: transparent !important; -webkit-text-stroke: 1px rgb(214 206 255 / .28);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 62%, rgb(0 0 0 / .08) 100%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 62%, rgb(0 0 0 / .08) 100%);
  filter: drop-shadow(0 0 34px rgb(110 92 255 / .26)); opacity: .82; }
@media (max-width: 760px) { .site-footer.f3 .footer-mark { font-size: 25vw !important; margin-top: 28px !important; text-align: center !important; } }
@media (max-width: 760px) {
  .x-stage .x-grain { opacity: .28; -webkit-mask-image: radial-gradient(75% 60% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 60% at 50% 45%, #000 30%, transparent 100%); }
  .x-stage .x-filament { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
}