/* 官网改版草稿 · 第三版设计语言（深色云海）
   开场是深色的云海和夜色，往下滚动时背景由深入浅，落到产品界面的浅灰白。
   字体按客户要求整体用无衬线黑体（中文系统黑体 + Inter），粉紫只做小面积强调，不用湖蓝。
   浅色正文里的示意卡片保持深色，和使用场景页一样形成撞色。 */

@font-face {
  font-family: "Boseek Sans";
  src: url("assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Boseek Sans";
  src: url("assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  /* 首屏 HunterBuddy 字标专用：阿里妈妈数黑体 Bold，只保留基本拉丁字符 */
  font-family: "HB Wordmark";
  src: url("assets/fonts/alimama-shuheiti-bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* night (第三版) */
  --night: #0f1011;
  --night-raised: #1b1c1f;
  --on-night: #f5f5f7;
  --on-night-soft: #c9c9cd;
  --on-night-muted: #a9a9ac;
  --night-line: rgb(255 255 255 / 10%);
  /* day (产品浅色主题) */
  --paper: #f5f5f6;
  --card: #ffffff;
  --ink: #0f1011;
  --ink-2: #3a3a3f;
  --muted: #5d5d63;
  --line: #e6e6e9;
  /* accents (粉紫) */
  --iris: #a9a2e0;
  --iris-hi: #d1c9ff;
  --iris-ink: #5b4fc0;
  --orchid: #dd90d8;
  --sans: "Boseek Sans", "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --nav-h: 72px;
  /* the shared trial form reads these */
  --f-font: var(--sans);
  --f-bg: var(--paper);
  --f-surface: var(--card);
  --f-ink: var(--ink);
  --f-muted: var(--muted);
  --f-accent: var(--ink);
  --f-accent-text: var(--ink);
  --f-deep: #2e2e33;
  --f-line: var(--line);
  --f-soft: #efeff1;
  --f-section-muted: var(--paper);
  --f-shadow: 0 24px 60px rgb(15 16 17 / 10%);
  --f-focus: rgb(91 79 192 / 30%);
  --f-error: #c2410c;
  --f-success: #15803d;
  --f-control-border: #d6d6db;
  --f-control-border-hover: #a9a9ae;
  --f-nav-h: var(--nav-h);
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
html,
body {
  background: var(--night);
}
body.n-page {
  margin: 0;
  color: var(--on-night);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
body.n-page::after {
  display: none;
}
.n-page :is(h1, h2, h3, h4, p, ul, ol, figure) {
  margin: 0;
}
.n-page :is(ul, ol) {
  padding: 0;
  list-style: none;
}
.n-page a {
  color: inherit;
  text-decoration: none;
}
.n-page :focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 3px;
  border-radius: 4px;
}
.n-light :focus-visible {
  outline-color: var(--iris-ink);
}
#main:focus,
[tabindex="-1"]:focus {
  outline: none;
}

.n-wrap {
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
}
.n-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  transform: translateY(-200%);
}
.n-skip:focus {
  transform: none;
}

/* ---------- small type ---------- */
.n-kicker {
  margin-bottom: 18px !important;
  color: var(--iris);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.n-light .n-kicker {
  color: var(--iris-ink);
}
.n-h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.n-sub {
  margin-top: 20px !important;
  max-width: 620px;
  color: var(--on-night-muted);
  font-size: 16px;
  line-height: 1.85;
}
.n-light .n-sub {
  color: var(--muted);
}
.n-sub a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.n-section-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.n-section-head .n-sub {
  margin-inline: auto;
}

/* ---------- buttons ---------- */
.n-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  line-height: 24px;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.n-btn-light {
  background: #ffffff;
  color: var(--ink) !important;
}
.n-btn-light:hover {
  background: #d9d9db;
}
.n-btn-sm {
  min-height: 40px;
  padding: 7px 18px;
  font-size: 14px;
}
.n-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 15px;
}
.n-link::after,
.n-more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.n-link:hover::after,
.n-more:hover::after {
  transform: translateX(3px) rotate(45deg);
}
.n-link-light {
  color: #e4e4e7;
}

/* ---------- header: clear over the clouds, back with a dark bar when you scroll up ---------- */
.n-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: transform 0.4s var(--ease), background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.n-header.is-solid {
  background: rgb(15 16 17 / 88%);
  border-color: var(--night-line);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.n-header.is-hidden {
  transform: translateY(-100%);
}
.n-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}
.n-brand img {
  display: block;
  width: auto;
  height: 46px;
}
.n-nav {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 34px;
  transform: translateX(-50%);
}
.n-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgb(245 245 247 / 76%);
  font-size: 14px;
  transition: color 0.2s ease;
}
.n-nav a:hover,
.n-nav a[aria-current="true"] {
  color: #ffffff;
}
.n-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.n-lang {
  color: rgb(245 245 247 / 80%);
  font-size: 13px;
}
.n-lang:hover {
  color: #ffffff;
}
.n-menu {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.n-menu span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  background: #ffffff;
  transition: transform 0.25s ease, top 0.25s ease;
}
.n-menu span:first-child {
  top: 17px;
}
.n-menu span:last-child {
  top: 25px;
}
.n-menu[aria-expanded="true"] span:first-child {
  top: 21px;
  transform: rotate(45deg);
}
.n-menu[aria-expanded="true"] span:last-child {
  top: 21px;
  transform: rotate(-45deg);
}

/* ---------- 第一张：云海 ---------- */
.n-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(640px, 100svh);
  overflow: hidden;
  background: var(--night);
  isolation: isolate;
}
.n-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.n-layer {
  position: absolute;
  inset: -4%;
  will-change: transform;
}
.n-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.n-layer-base img {
  object-position: 50% 62%;
}
/* the photo a touch crisper than the file, so the cloud sea reads white rather than grey */
.n-layer-base img,
.n-layer-front img {
  filter: contrast(1.06) saturate(1.1) brightness(1.04);
}
.n-layer-front {
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 74%);
  mask-image: linear-gradient(180deg, transparent 40%, #000 74%);
}
.n-layer-front img {
  object-position: 50% 70%;
  transform: scale(1.16);
}
/* mist: rendered on black and screened onto the sky, panned in a seamless loop (image, mirror, image, mirror) */
.n-layer-mist {
  mix-blend-mode: screen;
  overflow: hidden;
}
.n-pan {
  display: flex;
  width: 400%;
  height: 100%;
}
.n-pan img {
  width: 25%;
  flex: none;
}
.n-pan img:nth-child(even) {
  transform: scaleX(-1);
}
.n-mist-a {
  inset: auto -4% 0;
  height: 62%;
  opacity: 0.4;
}
.n-mist-b {
  opacity: 0.22;
  /* the wisps stay down in the cloud sea; over the sky they read as grey streaks */
  -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 72%);
  mask-image: linear-gradient(180deg, transparent 42%, #000 72%);
}
.n-sky-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(15 16 17 / 45%) 0%, rgb(15 16 17 / 0%) 22%),
    linear-gradient(180deg, rgb(15 16 17 / 0%) 74%, var(--night) 100%);
}

/* daybreak: the page opens on night and the sky lightens in about four seconds, the way the film ends.
   Without motion (or without the .motion class) it simply shows the daybreak. The animation waits
   for the photo (.is-ready, set by the photo's onload) so it never plays over an empty sky. */
.n-break {
  position: absolute;
  inset: -4% -1%;
  will-change: transform;
}
.n-break > i,
.n-night {
  position: absolute;
  inset: 0;
}
/* sky colour: violet-blue overhead, pink then peach toward the horizon; a tint, not a brightening */
.n-break-sky {
  background: linear-gradient(180deg, rgb(26 20 70 / 30%) 0%, rgb(70 52 130 / 22%) 30%, rgb(170 110 170 / 22%) 46%, rgb(240 150 120 / 26%) 54%, rgb(240 150 120 / 10%) 60%, rgb(240 150 120 / 0%) 70%);
}
/* the sun about to come up, on the right, clear of the words */
.n-break-glow {
  background:
    radial-gradient(15% 4.2% at 88% 56.6%, rgb(255 222 180 / 72%) 0%, rgb(255 190 140 / 30%) 50%, transparent 100%),
    radial-gradient(30% 9% at 84% 56%, rgb(255 160 104 / 60%) 0%, rgb(250 140 120 / 26%) 45%, transparent 80%),
    radial-gradient(75% 10% at 70% 56%, rgb(250 150 140 / 26%) 0%, transparent 75%),
    radial-gradient(40% 30% at 86% 50%, rgb(200 130 190 / 22%) 0%, transparent 75%);
}
/* warm light on the cloud tops near the sun */
.n-break-rim {
  mix-blend-mode: overlay;
  background: radial-gradient(60% 30% at 84% 62%, rgb(255 160 100 / 75%) 0%, rgb(240 130 140 / 30%) 50%, transparent 80%);
}
/* a faint shade behind the words so they stay easy to read once the sky is light */
.n-break-scrim {
  background: radial-gradient(34% 24% at 50% 56%, rgb(10 10 28 / 30%) 0%, rgb(10 10 28 / 12%) 55%, transparent 80%);
}
.n-night {
  background: #04060c;
  opacity: 0;
}
/* portrait screens: the horizon sits lower and the sun against the right edge */
@media (max-aspect-ratio: 4/5) {
  .n-break-sky {
    background: linear-gradient(180deg, rgb(26 20 70 / 30%) 0%, rgb(70 52 130 / 22%) 34%, rgb(170 110 170 / 20%) 52%, rgb(240 150 120 / 24%) 61%, rgb(240 150 120 / 8%) 66%, rgb(240 150 120 / 0%) 74%);
  }
  .n-break-glow {
    background:
      radial-gradient(34% 3.4% at 88% 62.6%, rgb(255 222 180 / 72%) 0%, rgb(255 190 140 / 30%) 50%, transparent 100%),
      radial-gradient(70% 7% at 82% 62.4%, rgb(255 160 104 / 58%) 0%, rgb(250 140 120 / 24%) 45%, transparent 80%),
      radial-gradient(130% 8% at 60% 62.6%, rgb(250 150 140 / 24%) 0%, transparent 75%),
      radial-gradient(80% 20% at 86% 58%, rgb(200 130 190 / 20%) 0%, transparent 75%);
  }
  .n-break-rim {
    background: radial-gradient(90% 22% at 82% 68%, rgb(255 160 100 / 70%) 0%, rgb(240 130 140 / 28%) 50%, transparent 80%);
  }
}
.motion .n-night {
  animation: n-night-out 3.8s 0.3s cubic-bezier(0.45, 0, 0.3, 1) both;
}
.motion .n-break-sky {
  animation: n-break-in 3.4s 0.8s cubic-bezier(0.45, 0, 0.3, 1) both;
}
.motion .n-break-glow {
  animation: n-break-rise 3.8s 0.6s cubic-bezier(0.3, 0, 0.2, 1) both;
}
.motion .n-break-rim {
  animation: n-break-in 3.2s 1.3s ease-in-out both;
}
.motion .n-sky:not(.is-ready) :is(.n-night, .n-break > i) {
  animation-play-state: paused;
}
@keyframes n-night-out {
  from { opacity: 0.66; }
  to { opacity: 0; }
}
@keyframes n-break-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes n-break-rise {
  from { opacity: 0; transform: translate3d(0, 4%, 0); }
  to { opacity: 1; transform: none; }
}
.motion .n-layer-base img {
  animation: n-drift-back 46s ease-in-out infinite alternate;
}
.motion .n-layer-front img {
  animation: n-drift-front 26s ease-in-out infinite alternate;
}
.motion .n-mist-a .n-pan {
  animation: n-pan 150s linear infinite;
}
.motion .n-mist-b .n-pan {
  animation: n-pan 210s linear infinite reverse;
}
@keyframes n-drift-back {
  from { transform: scale(1.06) translate3d(-1.4%, 0.3%, 0); }
  to { transform: scale(1.1) translate3d(1.4%, -0.8%, 0); }
}
@keyframes n-drift-front {
  from { transform: scale(1.16) translate3d(2.6%, 0.6%, 0); }
  to { transform: scale(1.2) translate3d(-2.6%, -0.6%, 0); }
}
@keyframes n-pan {
  to { transform: translate3d(-50%, 0, 0); }
}

.n-hero-copy {
  padding-block: calc(var(--nav-h) + 24px) 72px;
  text-align: center;
  will-change: transform, opacity;
}
.n-status {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px !important;
  padding: 6px 16px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: #e3e3e7;
  font-size: 13px;
  line-height: 22px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.n-status span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--iris-hi);
}
.n-mark {
  padding: 0 0.04em 0.08em;
  font-family: "HB Wordmark", var(--sans);
  font-size: max(60px, min(140px, 9.3vw, 14.4vh));
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 30%, #d8d0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 22px rgb(0 0 0 / 38%));
}
.n-role {
  margin-top: clamp(14px, 2vh, 22px) !important;
  color: #c9c3ef;
  font-size: 15px;
  letter-spacing: 0.32em;
  text-shadow: 0 1px 14px rgb(12 10 40 / 55%);
}
.n-promise {
  display: grid;
  gap: 4px;
  margin-top: clamp(26px, 4vh, 40px) !important;
  color: #ececf0;
  text-shadow: 0 1px 14px rgb(12 10 40 / 55%);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.75;
  text-shadow: 0 1px 16px rgb(0 0 0 / 55%);
}
.n-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 32px;
  margin-top: clamp(30px, 4.6vh, 46px);
}

/* ---------- 第二张：一句话说清 ---------- */
.n-dark {
  background: var(--night);
  color: var(--on-night);
}
.n-intro {
  padding-block: 64px 40px;
  text-align: center;
}
.n-display {
  display: grid;
  gap: 6px;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.n-display span:last-child {
  color: var(--on-night-soft);
}
.n-lede {
  max-width: 760px;
  margin: 28px auto 0 !important;
  color: var(--on-night-muted);
  font-size: 17px;
  line-height: 1.9;
}
.n-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 980px;
  margin: 40px auto 0 !important;
}
.n-chips a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  color: #e3e3e7;
  font-size: 15px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.n-chips a:hover {
  border-color: rgb(209 201 255 / 55%);
  background: rgb(209 201 255 / 7%);
}
.n-chips i,
.n-chapters i,
.n-card-index,
.n-spread-title i,
.n-bounds i {
  font-family: var(--mono);
  font-style: normal;
  letter-spacing: 0.06em;
}
.n-chips i {
  color: var(--iris);
  font-size: 12px;
}

/* ---------- 产品短片 ---------- */
.n-film {
  padding-block: 96px 120px;
  border-top: 1px solid var(--night-line);
}
.n-film-frame {
  margin-top: 56px !important;
  scroll-margin-top: 24px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
  background: #000;
  aspect-ratio: 16 / 9;
}
.n-film-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.n-film-frame {
  position: relative;
}
/* the cover image has its own play button; the whole cover starts the film */
.n-film-cover {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.n-film-cover:focus-visible {
  outline: 2px solid var(--iris-hi);
  outline-offset: -4px;
}
.n-chapters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 22px !important;
}
.n-chapters button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: transparent;
  color: var(--on-night-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.n-chapters button:hover {
  border-color: rgb(255 255 255 / 34%);
  color: #ffffff;
}
.n-chapters i {
  color: var(--iris);
  font-size: 12px;
}

/* ---------- 由深入浅 ---------- */
.n-dawn {
  position: relative;
  height: 46vh;
  min-height: 260px;
  overflow: hidden;
  /* night turns to day over about one screen: this band carries the dark half,
     the top of the next section carries the light half behind its heading */
  background: linear-gradient(
    180deg,
    #0f1011 0%,
    #171819 10%,
    #232425 20%,
    #313233 30%,
    #414142 40%,
    #515152 50%,
    #616162 60%,
    #717172 70%,
    #818182 80%,
    #909091 90%,
    #9e9e9f 100%
  );
}
/* the same mist as the hero, thinning out as the day comes up */
.n-dawn-mist {
  position: absolute;
  inset: 0 -10%;
  overflow: hidden;
  opacity: 0.4;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 46%, transparent 78%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 46%, transparent 78%);
}
.n-dawn-mist img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.motion .n-dawn-mist .n-pan {
  animation: n-pan 240s linear infinite;
}

/* ---------- 浅色部分 ---------- */
.n-light {
  background: var(--paper);
  color: var(--ink);
}

/* 第三～五张：六件事 */
.n-caps {
  padding-block: 8vh 120px;
  background: linear-gradient(180deg, #9e9e9f 0.0vh, #b2b2b3 7.0vh, #c4c4c5 14.0vh, #d3d3d4 21.0vh, #dfe0e1 28.0vh, #e9e9ea 35.0vh, #f0f0f1 42.0vh, #f4f4f5 49.0vh, #f5f5f6 56.0vh, var(--paper) 100%);
}
/* the heading sits where the day is still coming up, so its small type is a shade darker */
.n-caps .n-section-head .n-kicker {
  color: #3f348f;
}
.n-caps .n-section-head .n-sub {
  color: var(--ink-2);
}
.n-section-head-wide {
  max-width: 820px;
}
.n-spread {
  margin-top: 96px;
}
.n-spread-title {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.4;
}
.n-spread-title i {
  flex: none;
  padding: 2px 10px;
  border: 1px solid #cfcbea;
  border-radius: 999px;
  color: var(--iris-ink);
  font-size: 12px;
  line-height: 20px;
  transform: translateY(-3px);
}
.n-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.n-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 14px 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  scroll-margin-top: 100px;
}
.n-card > :not(.n-figure) {
  margin-inline: 18px !important;
}
.n-card-index {
  margin-top: 26px !important;
  color: var(--iris-ink);
  font-size: 12px;
}
.n-pain {
  margin-top: 10px !important;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.n-card h3 {
  margin-top: 14px !important;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.45;
}
.n-card h3 + p {
  margin-top: 12px !important;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.9;
}
.n-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: auto !important;
  padding-top: 22px;
  color: var(--ink);
  font-size: 14px;
}
.n-more:hover {
  color: var(--iris-ink);
}

/* the dark figure set into each white card (撞色) */
.n-figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 236px;
  padding: 28px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--night);
  color: var(--on-night);
  font-size: 13px;
  line-height: 1.5;
}
.n-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 50% 0%, rgb(209 201 255 / 11%), transparent 70%);
}
.n-figure > * {
  position: relative;
  width: 100%;
}

/* ---------- 六件事的配图：每张是一个小场景 ----------
   卡片叠出层次，写着来源，有依据的用浅紫，拿不准的用虚线粉标出来。 */
.n-figure {
  container-type: inline-size;
}
.n-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 9%) 1px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 48%, #000 10%, transparent 80%);
  mask-image: radial-gradient(75% 70% at 50% 48%, #000 10%, transparent 80%);
  pointer-events: none;
}
.n-figure > * {
  z-index: 1;
}
.fx {
  display: grid;
  gap: 12px;
  max-width: 440px;
  margin-inline: auto;
  color: var(--on-night);
  font-size: 12.5px;
  line-height: 1.5;
}
.fx-card {
  position: relative;
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 12px;
  background: linear-gradient(180deg, #212227, #17181b);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 18px 40px rgb(0 0 0 / 45%);
}
.fx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fx-cap {
  color: var(--on-night-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.fx-hi {
  color: var(--iris-hi);
}
.fx-title {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
}
.fx-av {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(209 201 255 / 35%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgb(209 201 255 / 32%), rgb(209 201 255 / 8%));
  color: var(--on-night);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}
.fx-av-lg {
  width: 38px;
  height: 38px;
  font-size: 15px;
}
.fx-ok {
  padding: 1px 9px;
  border: 1px solid rgb(209 201 255 / 40%);
  border-radius: 999px;
  color: var(--iris-hi);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}
.fx-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fx-who > div {
  flex: 1;
  min-width: 0;
}
.fx-who b {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.fx-who span {
  display: block;
  color: var(--on-night-soft);
  font-size: 12px;
}
.fx-src {
  color: var(--on-night-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-align: center;
}

/* 01 人岗匹配：JD 拆成三项，三路召回，按匹配分排好 */
.fx-jd {
  width: 90%;
}
.fx-jd-body {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.fx-text {
  display: grid;
  gap: 8px;
}
.fx-text i {
  display: block;
  width: var(--w);
  height: 5px;
  border-radius: 4px;
  background: rgb(255 255 255 / 10%);
}
.fx-text i.is-hit {
  background: linear-gradient(90deg, rgb(209 201 255 / 75%), rgb(209 201 255 / 25%));
}
.fx-facets {
  display: grid;
  gap: 6px;
  margin: 0;
}
.fx-facets div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(255 255 255 / 4.5%);
}
.fx-facets dt {
  flex: none;
  color: var(--iris-hi);
  font-size: 11px;
}
.fx-facets dd {
  margin: 0;
  overflow: hidden;
  color: var(--on-night-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-pipe {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-block: -2px !important;
  padding: 6px 0 6px 40px;
  color: var(--on-night-muted);
  font-size: 11px;
}
.fx-pipe::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 22px;
  width: 1px;
  background: linear-gradient(180deg, rgb(209 201 255 / 15%), rgb(209 201 255 / 70%));
}
.fx-pipe::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 19.5px;
  width: 6px;
  height: 6px;
  border-right: 1px solid rgb(209 201 255 / 80%);
  border-bottom: 1px solid rgb(209 201 255 / 80%);
  transform: rotate(45deg);
}
.fx-pipe span + span::before {
  content: "·";
  margin-right: 8px;
}
.fx-results {
  width: 92%;
  margin-left: auto;
}
/* the rest of the list, stacked behind */
.fx-results::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 14px;
  bottom: -9px;
  left: 14px;
  height: 40px;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 12px;
  background: #141518;
}
.fx .fx-rank {
  display: grid;
  margin-top: 8px;
}
.fx-rank li {
  display: grid;
  grid-template-columns: 24px auto minmax(36px, 1fr) 20px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgb(255 255 255 / 7%);
}
.fx-rank li:first-child {
  border-top: 0;
}
.fx-rank b {
  color: var(--on-night-soft);
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap;
}
.fx-rank .is-top b {
  color: var(--on-night);
}
.fx-rank s {
  position: relative;
  height: 5px;
  border-radius: 4px;
  background: rgb(255 255 255 / 8%);
  text-decoration: none;
}
.fx-rank s::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, #8f86d8, var(--iris-hi));
}
.fx-rank em {
  color: var(--on-night);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  text-align: right;
}
.fx-rank u {
  padding: 1px 8px;
  border: 1px solid rgb(209 201 255 / 40%);
  border-radius: 999px;
  color: var(--iris-hi);
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}
.fx-rank u.is-risk {
  border-style: dashed;
  border-color: rgb(221 144 216 / 60%);
  color: #f0c6ee;
}
.fx-rank p {
  grid-column: 2 / -1;
  margin-top: -4px !important;
  color: var(--on-night-muted);
  font-size: 11.5px;
}

/* 02 自动寻访：四类来源收拢到一起，按优先级排好 */
.fx-need {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 14px;
  border: 1px solid rgb(209 201 255 / 30%);
  border-radius: 999px;
  background: rgb(209 201 255 / 7%);
}
.fx-need b {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-flow {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) minmax(0, 1.35fr);
  align-items: stretch;
  margin-top: 6px;
}
.fx-srcs {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  align-items: center;
  gap: 8px;
}
.fx-srcs li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 9px;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 9px;
  background: #1b1c20;
  color: var(--on-night-soft);
  font-size: 12px;
  white-space: nowrap;
}
.fx-srcs li.is-own {
  border-color: rgb(209 201 255 / 38%);
  color: var(--on-night);
}
.fx-srcs svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--iris-hi);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.3;
}
.fx-merge {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fx-merge path,
.fx-converge path,
.fx-branches path {
  fill: none;
  stroke: rgb(209 201 255 / 45%);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.fx-queue {
  align-self: center;
}
.fx-queue::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--iris-hi);
  box-shadow: 0 0 0 4px rgb(209 201 255 / 15%);
  transform: translateY(-50%);
}
.fx-queue ol {
  display: grid;
  margin-top: 6px;
}
.fx-queue li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgb(255 255 255 / 7%);
  white-space: nowrap;
}
.fx-queue li:first-child {
  border-top: 0;
}
.fx-queue li:first-child > span:first-child {
  color: var(--iris-hi);
}
.fx-avs {
  display: flex;
  padding-left: 6px;
}
.fx-avs .fx-av {
  width: 22px;
  height: 22px;
  margin-left: -6px;
  box-shadow: 0 0 0 2px #1c1d21;
  font-size: 10px;
}
.fx-queue li:not(:first-child) .fx-av {
  opacity: 0.72;
}

.fx-merged {
  width: 92%;
  margin-left: auto;
}
.fx-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 8%);
}
.fx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fx-tags em {
  padding: 1px 8px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  color: var(--on-night-soft);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

/* 03 真实姓名：三个化名对到同一个人，同名的另一位已排除 */
.fx-aliases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.fx-aliases li {
  display: grid;
  gap: 2px;
  padding: 8px 6px;
  border: 1px dashed rgb(255 255 255 / 22%);
  border-radius: 9px;
  background: rgb(15 16 17 / 60%);
  color: var(--on-night-soft);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.fx-aliases small {
  color: var(--on-night-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.fx-converge {
  display: block;
  width: 100%;
  height: 26px;
  margin-block: -12px !important;
}
.fx-id-stack {
  position: relative;
  padding-bottom: 30px;
}
.fx-person {
  width: 88%;
}
/* the other 林越, pushed to the back */
.fx-ghost {
  position: absolute;
  z-index: -1;
  inset: 26px 0 0 14%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 14px;
  background: #141518;
  box-shadow: none;
  color: var(--on-night-muted);
  font-size: 11px;
}
.fx-ghost span {
  text-decoration: line-through;
  text-decoration-color: rgb(255 255 255 / 35%);
}
.fx-ghost em {
  font-style: normal;
}
.fx .fx-checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 8%);
}
.fx-checks li {
  position: relative;
  padding-left: 18px;
  color: var(--on-night-soft);
  font-size: 12px;
  white-space: nowrap;
}
.fx-checks li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 2px;
  width: 8px;
  height: 4.5px;
  border-bottom: 1.3px solid var(--iris-hi);
  border-left: 1.3px solid var(--iris-hi);
  transform: rotate(-45deg);
}
.fx-checks li.is-wait::before {
  top: 3px;
  left: 1px;
  width: 9px;
  height: 9px;
  border: 1px dashed rgb(221 144 216 / 80%);
  border-radius: 50%;
  transform: none;
}
.fx-checks em {
  margin-left: 6px;
  padding: 0 7px;
  border: 1px dashed rgb(221 144 216 / 60%);
  border-radius: 999px;
  color: #f0c6ee;
  font-size: 10.5px;
  font-style: normal;
}
.fx-route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px !important;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgb(255 255 255 / 4.5%);
  font-size: 12px;
}

/* 04 BD 研判：五类信号汇到一张研判 */
.fx .fx-signals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 340px;
  margin-inline: auto;
}
.fx-signals li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: #1b1c20;
  color: var(--on-night-soft);
  font-size: 12px;
  white-space: nowrap;
}
.fx-signals li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iris);
}
.fx-signals li:nth-child(2) {
  transform: translateY(6px);
}
.fx-signals li:nth-child(4) {
  transform: translateX(-14px);
}
.fx-stem {
  justify-self: center;
  width: 1px;
  height: 26px;
  margin-block: -4px;
  background: linear-gradient(180deg, rgb(209 201 255 / 10%), rgb(209 201 255 / 70%));
}
.fx .fx-meters {
  display: grid;
  margin-top: 8px;
}
.fx-meters li {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}
.fx-meters span {
  font-size: 12.5px;
}
.fx-meters i {
  height: 6px;
  background: linear-gradient(90deg, var(--iris-hi) calc(var(--n) * 20%), rgb(255 255 255 / 12%) 0);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
}
.fx-meters b {
  color: var(--iris-hi);
  font-size: 11px;
  font-weight: 400;
}
.fx-meters .is-wait i {
  background: linear-gradient(90deg, #e3a6df calc(var(--n) * 20%), rgb(255 255 255 / 12%) 0);
}
.fx-meters .is-wait b {
  padding: 0 8px;
  border: 1px dashed rgb(221 144 216 / 60%);
  border-radius: 999px;
  color: #f0c6ee;
}
.fx-chain {
  display: flex;
  flex-wrap: wrap; /* on a narrow phone the chain drops under its label instead of pushing the card past the frame */
  align-items: center;
  gap: 6px 12px;
  margin-top: 12px;
}
.fx-chain ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fx-chain li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.fx-chain li + li::before {
  content: "→";
  color: var(--on-night-muted);
}
.fx-chain li.is-wait {
  color: #f0c6ee;
}
.fx-chain li.is-wait::after {
  content: "待确认";
  padding: 0 7px;
  border: 1px dashed rgb(221 144 216 / 60%);
  border-radius: 999px;
  font-size: 10.5px;
}
.fx-chain li.is-wait:lang(en)::after {
  content: "To confirm";
}

/* 05 人脉资产：人脉里有人动了，信息跟着更新 */
.fx-sky {
  position: relative;
  aspect-ratio: 400 / 150;
}
.fx-sky svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fx-links path {
  fill: none;
  stroke: rgb(255 255 255 / 12%);
  stroke-width: 1;
}
.fx-dots circle {
  fill: #2a2b31;
  stroke: rgb(255 255 255 / 30%);
  stroke-width: 1;
}
.fx-lit circle {
  fill: var(--iris-hi);
  stroke: rgb(209 201 255 / 30%);
  stroke-width: 6;
}
.fx-ping {
  position: absolute;
  padding: 1px 9px;
  border: 1px solid rgb(209 201 255 / 35%);
  border-radius: 999px;
  background: #1c1d22;
  color: var(--on-night-soft);
  font-size: 11px;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
}
.fx-ping:last-of-type {
  transform: translate(-78%, calc(-100% - 10px));
}
.fx-profile {
  width: 94%;
  margin: -18px auto 0;
}
.fx .fx-tl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 8%);
}
.fx-tl li {
  position: relative;
  display: grid;
  gap: 2px;
  padding-top: 16px;
}
.fx-tl li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid rgb(209 201 255 / 70%);
  border-radius: 50%;
  background: #1a1b1f;
}
.fx-tl li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -6px;
  left: 14px;
  height: 1px;
  background: rgb(255 255 255 / 14%);
}
.fx-tl li.is-now::before {
  background: var(--iris-hi);
  box-shadow: 0 0 0 4px rgb(209 201 255 / 16%);
}
.fx-tl i {
  color: var(--on-night-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
}
.fx-tl b {
  font-size: 12.5px;
  font-weight: 500;
}
.fx-tl span {
  color: var(--on-night-soft);
  font-size: 11.5px;
}
.fx-tl .is-now b {
  color: var(--iris-hi);
}

/* 06 组织架构：多维度视图，缺的位置标出来 */
.fx-tabs {
  display: flex;
  justify-self: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  background: #18191c;
}
.fx-tabs span {
  padding: 3px 12px;
  border-radius: 999px;
  color: var(--on-night-muted);
  font-size: 11.5px;
}
.fx-tabs .is-on {
  background: rgb(209 201 255 / 14%);
  color: var(--on-night);
}
.fx-tree {
  display: grid;
  justify-items: center;
  margin-top: 6px;
}
.fx-node {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 10px;
  background: linear-gradient(180deg, #212227, #18191c);
  box-shadow: 0 12px 28px rgb(0 0 0 / 40%);
  text-align: center;
}
.fx-node b {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.fx-root {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  text-align: left;
}
.fx-root span {
  display: block;
  color: var(--on-night-muted);
  font-size: 11px;
}
.fx-branches {
  display: block;
  width: 100%;
  height: 34px;
}
.fx-top {
  padding: 6px 14px;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.fx-top b {
  color: var(--on-night-soft);
  font-weight: 400;
}
.fx-trunk {
  width: 1px;
  height: 18px;
  background: rgb(209 201 255 / 45%);
}
.fx-kids .fx-avs {
  padding-left: 6px;
}
.fx-more {
  background: #26272c;
  color: var(--on-night-soft);
  font-size: 9.5px;
}
.fx-kids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.fx-kids .fx-node {
  justify-self: center;
  width: 100%;
  max-width: 128px;
}
.fx-node.is-gap {
  border: 1px dashed rgb(221 144 216 / 60%);
  background: rgb(15 16 17 / 50%);
  box-shadow: none;
}
.fx-node.is-gap b {
  color: #f0c6ee;
}
.fx-node.is-gap em {
  color: #f0c6ee;
  font-size: 10.5px;
  font-style: normal;
}
.fx-org .fx-src {
  margin-top: 8px !important;
}

/* narrow cards (phones): drop the decoration, keep what each picture says */
@container (max-width: 380px) {
  .fx {
    gap: 10px;
    font-size: 12px;
  }
  .fx-jd,
  .fx-results,
  .fx-merged,
  .fx-person,
  .fx-profile {
    width: 100%;
  }
  .fx-who {
    gap: 10px;
  }
  .fx-av-lg {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .fx-who span {
    font-size: 11.5px;
  }
  .fx-jd-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .fx-text {
    display: none;
  }
  .fx-rank li {
    grid-template-columns: 24px auto minmax(24px, 1fr) 20px auto;
    gap: 8px;
  }
  .fx-flow {
    grid-template-columns: auto 18px minmax(0, 1fr);
  }
  .fx-srcs li {
    padding: 6px 8px;
    gap: 6px;
    font-size: 11.5px;
  }
  .fx-srcs svg {
    display: none;
  }
  .fx-queue {
    padding: 12px;
  }
  .fx-aliases li {
    font-size: 11px;
  }
  .fx-ghost {
    left: 6%;
  }
  .fx-id-stack {
    padding-bottom: 28px;
  }
  .fx-person {
    width: 94%;
  }
  .fx-signals li:nth-child(n) {
    transform: none;
  }
  .fx-ping {
    font-size: 10px;
  }
  .fx-tl span {
    display: none;
  }
  .fx-tabs span {
    padding: 3px 9px;
  }
  .fx-kids {
    gap: 6px;
  }
  .fx-kids .fx-node {
    padding: 9px 6px;
  }
}

/* ---------- 第六张：产品边界 ---------- */
.n-belief {
  padding-block: 40px 140px;
}
.n-belief-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 80px;
  align-items: end;
  padding-top: 72px;
  border-top: 1px solid var(--line);
}
.n-belief-head .n-kicker {
  grid-column: 1 / -1;
}
.n-belief-head .n-h2 {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.3;
}
.n-belief-copy {
  display: grid;
  gap: 14px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.9;
}
.n-belief-photo {
  margin-top: 56px !important;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 2.4 / 1;
  background: #dcdce0;
}
.n-belief-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.n-bounds {
  margin-top: 88px;
}
.n-bounds h3 {
  text-align: center;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.45;
}
.n-bounds ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  margin-top: 40px !important;
}
.n-bounds li {
  padding-top: 22px;
  border-top: 1px solid var(--ink);
  font-size: 18px;
  line-height: 1.75;
}
.n-bounds i {
  display: block;
  margin-bottom: 12px;
  color: var(--iris-ink);
  font-size: 13px;
}
.n-bounds-close {
  margin-top: 72px !important;
  text-align: center;
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- 第七张：深耕各行赛道（照片墙） ---------- */
.n-industries {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(660px, 90vh, 860px);
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.n-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}
/* redesign.js places each tile in whole pixels; neighbours touch with no gap */
.n-tile {
  position: absolute;
  overflow: hidden;
  background: #dcdce0;
}
.n-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(0.95) brightness(1.02);
  opacity: 0.5;
  transform: scale(1.02);
  /* dimming back: wait a beat, then fade slowly */
  transition: filter 1.6s ease 0.9s, opacity 1.6s ease 0.9s, transform 1.6s ease 0.9s;
}
.n-tile b {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgb(15 16 17 / 72%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.8s ease 0.9s;
}
.n-tile.is-lit img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
  transition-duration: 0.35s;
  transition-delay: 0s;
}
.n-tile.is-lit b {
  opacity: 1;
  transition-duration: 0.3s;
  transition-delay: 0s;
}
.n-wall-panel {
  position: relative;
  z-index: 2;
  width: min(620px, calc(100% - 40px));
  margin-block: 64px;
  padding: 44px 48px 40px;
  border: 1px solid rgb(15 16 17 / 8%);
  border-radius: 18px;
  background: rgb(245 245 246 / 90%);
  text-align: center;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgb(15 16 17 / 12%);
}
.n-wall-panel .n-h2 {
  font-size: clamp(32px, 3.4vw, 46px);
}
.n-wall-panel .n-sub {
  margin-inline: auto;
}
.n-industry-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 26px !important;
}
.n-industry-list li {
  padding: 4px 12px;
  border: 1px solid #d9d9de;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 13px;
}

/* ---------- 常见问题 ---------- */
.n-faq {
  padding-block: 120px;
  border-top: 1px solid var(--line);
}
.n-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px 80px;
  align-items: start;
}
.n-faq .n-section-head {
  position: sticky;
  top: 110px;
  text-align: left;
  margin: 0;
}
.n-faq-list {
  border-top: 1px solid var(--line);
}
.n-faq details {
  border-bottom: 1px solid var(--line);
}
.n-faq summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
.n-faq summary::-webkit-details-marker {
  display: none;
}
.n-faq summary span {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}
.n-faq summary i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--iris-ink);
}
.n-faq summary i::before,
.n-faq summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 0.25s ease;
}
.n-faq summary i::after {
  transform: rotate(90deg);
}
.n-faq details[open] summary i::after {
  transform: rotate(0deg);
}
.n-faq details p {
  margin-top: -6px !important;
  padding: 0 34px 26px 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.9;
}

/* ---------- 申请试用（共用的表单，浅色） ---------- */
.n-apply .f-trial {
  padding-block: 120px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.n-apply .f-container {
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
}
.n-apply .f-trial-intro h2 {
  max-width: none;
  color: var(--ink);
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.4;
}
.n-apply .f-trial-intro .f-trial-thought {
  color: var(--ink);
  font-weight: 400;
}
.n-apply .f-trial-content {
  padding: 36px 36px 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.n-apply .f-button {
  border-radius: 8px;
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}
.n-apply .f-button:hover {
  background: #2e2e33;
  border-color: #2e2e33;
}
.n-apply .f-text-link {
  color: var(--ink);
}
.n-apply :is(input, textarea, .f-select-trigger, button[aria-haspopup]) {
  border-radius: 8px;
}

/* ---------- 页脚（浅色） ---------- */
.n-footer {
  padding-block: 72px 40px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.n-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
}
.n-footer-brand img {
  display: block;
  width: auto;
  height: 46px;
  margin-bottom: 18px;
}
.n-footer-brand p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.n-footer-mail {
  margin-top: 8px !important;
}
.n-footer-mail a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgb(15 16 17 / 25%);
  text-underline-offset: 3px;
}
.n-footer-groups {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 32px 56px;
}
.n-footer-groups a {
  white-space: nowrap;
}
.n-footer-groups h2 {
  font-size: 13px;
  font-weight: 500;
}
.n-footer-groups ul {
  display: grid;
  gap: 12px;
  padding-top: 20px !important;
  color: var(--muted);
  font-size: 14px;
}
.n-footer-groups a:hover {
  color: var(--ink);
}
.n-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 56px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- reveals: from a visible resting state, only when motion is allowed ---------- */
.motion .n-reveal {
  transition: opacity 1.1s var(--ease), transform 1.2s var(--ease);
}
.motion .n-reveal.is-waiting {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .n-nav {
    gap: 22px;
  }
}
@media (max-width: 900px) {
  .n-nav {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: grid;
    gap: 4px;
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--night-line);
    background: rgb(15 16 17 / 96%);
    transform: none;
  }
  .n-nav[hidden],
  .n-header:not(.is-open) .n-nav {
    display: none;
  }
  .n-header.is-open {
    background: rgb(15 16 17 / 96%);
  }
  .n-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .n-belief-head,
  .n-faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .n-faq .n-section-head {
    position: static;
  }
}
@media (max-width: 800px) {
  .n-wrap,
  .n-apply .f-container {
    width: calc(100% - 40px);
  }
  :root {
    --nav-h: 64px;
  }
  .n-brand img,
  .n-footer-brand img {
    height: 40px;
  }
  .n-header-actions .n-btn-sm {
    display: none;
  }
  .n-mark {
    font-size: min(71px, calc((100vw - 32px) / 6.9));
  }
  .n-role {
    font-size: 13px;
    letter-spacing: 0.24em;
  }
  .n-promise {
    font-size: 17px;
  }
  .n-intro {
    padding-block: 40px 80px;
  }
  .n-film,
  .n-faq,
  .n-apply .f-trial {
    padding-block: 72px;
  }
  .n-spread {
    margin-top: 64px;
  }
  .n-figure {
    min-height: 0;
    padding: 22px 18px;
  }
  .n-card > :not(.n-figure) {
    margin-inline: 8px !important;
  }
  .n-belief-head {
    padding-top: 56px;
  }
  .n-belief-photo {
    aspect-ratio: 4 / 3;
  }
  .n-bounds ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .n-bounds li {
    font-size: 16px;
  }
  .n-industries {
    min-height: 820px;
  }
  .n-wall-panel {
    padding: 32px 22px 28px;
  }
  .n-apply .f-trial-content {
    padding: 24px 18px;
  }
  .n-footer-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .n-footer-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .n-header,
  .n-tile img,
  .n-tile b {
    transition: none;
  }
}

.n-tile.is-empty img {
  display: none;
}

.n-page :is(.n-lede, .n-sub, .n-pain, .n-card p, .n-belief-copy p, .n-faq details p) {
  text-wrap: pretty;
}

/* Chinese headings break at punctuation and spaces, not inside a phrase */
.n-page :is(.n-h2, .n-display, .n-spread-title, .n-card h3, .n-pain, .n-bounds h3, .n-bounds li, .n-bounds-close, .n-promise, .n-faq summary span, .f-trial-intro h2) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 800px) {
  .n-h2 {
    font-size: 28px;
  }
  .n-display {
    font-size: 26px;
  }
  .n-spread-title {
    font-size: 21px;
  }
  .n-card h3 {
    font-size: 21px;
  }
}


/* ---------- 六件事：左边文字钉在屏幕中间跟着换，右边的图往上走 ---------- */
.n-scrolly {
  display: grid;
  gap: 20px;
  margin-top: 64px;
}
.n-step-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px !important;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.n-step-meta i {
  padding: 2px 10px;
  border: 1px solid #cfcbea;
  border-radius: 999px;
  color: var(--iris-ink);
  font-family: var(--sans);
  font-style: normal;
  letter-spacing: 0;
}
.n-step-bar {
  display: none;
}

@media (min-width: 901px) {
  .js .n-scrolly {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: repeat(6, auto);
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 14vh;
    margin-top: 96px;
    padding-bottom: 6vh;
  }
  .js .n-step {
    display: contents;
  }
  /* all six texts share the left cell and stay pinned in the middle of the screen
     (redesign.js sets --stick so each one is centred without being shifted up,
     which is what used to push the first one over the section heading);
     only the one whose picture is passing the middle shows, and the old one is
     gone before the new one comes in, so two texts never sit on top of each other */
  .js .n-step-text {
    position: sticky;
    top: var(--stick, 24vh);
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.2s ease, transform 0.3s ease;
  }
  .js .n-step.is-past .n-step-text {
    transform: translate3d(0, -16px, 0);
  }
  .js .n-step.is-active .n-step-text {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.45s ease 0.2s, transform 0.6s var(--ease) 0.2s;
  }
  .js .n-step:nth-child(1) .n-figure { grid-row: 1; }
  .js .n-step:nth-child(2) .n-figure { grid-row: 2; }
  .js .n-step:nth-child(3) .n-figure { grid-row: 3; }
  .js .n-step:nth-child(4) .n-figure { grid-row: 4; }
  .js .n-step:nth-child(5) .n-figure { grid-row: 5; }
  .js .n-step:nth-child(6) .n-figure { grid-row: 6; }
  .js .n-scrolly .n-figure {
    grid-column: 2;
    /* redesign.js sets --vis from how close the picture is to the middle of the screen */
    opacity: var(--vis, 1);
    height: clamp(420px, 66vh, 620px);
    padding: 40px;
    border-radius: 18px;
    scroll-margin-top: 17vh;
  }
  /* redesign.js sizes and scales the scene to fit the panel */
  .js .n-scrolly .n-figure > * {
    max-width: none;
  }
  .js .n-step-meta {
    margin-top: 0 !important;
  }
  .js .n-step-text .n-pain {
    margin-top: 22px !important;
    font-size: 16px;
  }
  .js .n-step-text h3 {
    margin-top: 12px !important;
    font-size: clamp(28px, 2.5vw, 36px);
    line-height: 1.35;
  }
  :lang(zh-CN) #n-step-mapping {
    white-space: nowrap;
  }
  .js .n-step-text h3 + p {
    margin-top: 18px !important;
    font-size: 16.5px;
  }
  .js .n-step-text .n-more {
    margin-top: 0 !important;
    padding-top: 26px;
  }
  .js .n-step-bar {
    display: flex;
    gap: 6px;
    margin-top: 36px;
  }
  .js .n-step-bar i {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #d6d6db;
  }
  .js .n-step-bar i.is-on {
    width: 40px;
    background: var(--iris-ink);
  }
}

/* ---------- smooth scrolling (Lenis), like the reference site ---------- */
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: clip;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* scroll-linked pieces: the film grows into place, the photo drifts inside its frame,
   the diagram passing the middle comes forward */
.motion .n-film-frame,
.motion .n-belief-photo {
  will-change: transform;
}
.motion .n-belief-photo {
  position: relative;
}
.motion .n-belief-photo img {
  position: absolute;
  inset: -8% 0 auto;
  height: 116%;
  will-change: transform;
}

.n-thought-line {
  display: block;
}

/* the English page: its logo has no 铂寻 line, so it is set smaller to keep the word the same size as in the Chinese lockup */
:lang(en) .n-brand img,
:lang(en) .n-footer-brand img {
  height: 39px;
}
@media (max-width: 800px) {
  :lang(en) .n-brand img,
  :lang(en) .n-footer-brand img {
    height: 34px;
  }
}
/* English type: the Chinese tagline's wide tracking reads as gaps in Latin, and headings break more evenly when balanced */
:lang(en) .n-role {
  font-size: 16px;
  letter-spacing: 0.06em;
}
:lang(en) .n-step-text h3,
:lang(en) .n-card h3 {
  text-wrap: balance;
}

/* trial form dropdowns: once a list reaches its end, don't hand the scroll on to the page */
.f-select-menu {
  overscroll-behavior: contain;
}

/* trial form: the privacy policy link inside the consent line */
.f-form-consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(91 79 192 / 45%);
  text-underline-offset: 3px;
}
.f-form-consent a:hover {
  text-decoration-color: currentColor;
}