/* ==========================================================================
   SologoTM channel styles
   Inherits the Sologo web design system (palette + .sologo-* typography from
   statics/assets/styles/main.css). Server-rendered: no Vue/Vuetify runtime
   dependency, so the first paint content is present in the HTML source.
   ========================================================================== */

.tm-page {
  /* 全部指向站点主题 token（main.css :root），不复制色值：
     站点换主色 / 灰度时本频道自动跟随。 */
  --tm-primary: rgb(var(--v-theme-primary));
  --tm-primary-tint: rgb(var(--v-theme-primary-light));
  --tm-secondary: rgb(var(--v-theme-secondary));
  --tm-ink: rgb(var(--v-theme-gray-dark));
  --tm-gray: rgb(var(--v-theme-gray));
  --tm-gray-light: rgb(var(--v-theme-gray-light));
  --tm-bg: rgb(var(--v-theme-background));
  /* 中性描边色：与 main.css 的 .sologo-btn[floated] 同值 */
  --tm-border: #e3e3e3;
  --tm-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 0;
  /* 卡片圆角与站点一致（imagetologo demo 卡片同为 10px） */
  --tm-radius: 10px;
  background: rgb(var(--v-theme-surface));
  color: var(--tm-ink);
  font-family: "Roboto", Tahoma, Arial, sans-serif;
  /* 必须是 clip 而不是 hidden：hidden 会让 .tm-page 成为滚动容器，
     后代的 position:sticky 页头会因此失效（实测滚动后页头直接滚走）。 */
  overflow-x: clip;
}

.tm-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* -------------------------------------------------- header（独立 Logo + 频道导航） */
.tm-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}

/* 只在真正滚动后出现投影：顶部时与页面齐平，滚动时页头浮起来 */
.tm-nav.is-scrolled {
  box-shadow: var(--tm-shadow);
}

/* 整条贴屏幕（不套 .tm-wrap 的 1280 容器）：
   Logo 贴屏幕左、操作区贴屏幕右，左右留白与内容区一致（24px / 移动端 18px）。 */
.tm-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 72px;
  padding: 0 24px;
  box-sizing: border-box;
}

.tm-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

/* 图标与文字是两个独立链接：图标 -> 站点首页，文字 -> /tm */
.tm-brand__mark-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.tm-brand__mark {
  display: block;
  width: auto;
  height: 27px;
}

.tm-brand__word {
  text-decoration: none;
  font-family: "Roboto", Tahoma, Arial, sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--tm-ink);
}

.tm-brand__tm {
  color: var(--tm-primary);
}

/* 导航居中：绝对定位在屏幕正中，左右两侧宽度变化不会把它推偏
   （站点在线页头的 v-tabs 用的是同一套 left:50% + translateX(-50%)）。 */
.tm-nav__links {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 26px;
}

/* 只作用于顶部一级链接；下拉菜单内部有独立排版 */
.tm-nav__links > a,
.tm-nav__trigger {
  color: var(--tm-ink);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.tm-nav__links > a:hover,
.tm-nav__links > a.is-active,
.tm-nav__trigger:hover,
.tm-nav__group.is-open .tm-nav__trigger {
  color: var(--tm-primary);
}

/* -------------------------------------------------- 注册地下拉
   注册地是可增长维度（v1 两个，未来 US/EU/UK/JP…），固定收在一个入口里，
   导航条目数不随地区数量增长；菜单项是服务端直出的真实链接。 */
.tm-nav__group {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.tm-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
}

.tm-nav__caret {
  transition: transform 0.18s ease;
}

.tm-nav__group.is-open .tm-nav__caret {
  transform: rotate(180deg);
}

.tm-nav__menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  z-index: 5;
  min-width: 320px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.tm-nav__group.is-open .tm-nav__menu {
  display: block;
}

.tm-nav__menu-item {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  white-space: normal;
}

.tm-nav__menu-item:hover {
  background: var(--tm-primary-tint);
}

.tm-nav__menu-title {
  display: block;
  color: var(--tm-ink);
  font-size: 15px;
  font-weight: 700;
}

.tm-nav__menu-item.is-active .tm-nav__menu-title {
  color: var(--tm-primary);
}

.tm-nav__menu-note {
  display: block;
  margin-top: 2px;
  color: var(--tm-gray);
  font-size: 13px;
}

.tm-nav__menu-all {
  display: block;
  margin-top: 4px;
  padding: 10px 14px;
  border-top: 1px solid var(--tm-border);
  color: var(--tm-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.tm-nav__menu-all:hover {
  color: var(--tm-primary);
}

/* 仅移动端下拉里显示的 CTA（桌面端由右上角按钮承担） */
.tm-nav__links-cta {
  display: none;
}

.tm-nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The canonical report CTA is intentionally explicit. Keep its desktop header
   treatment compact so it clears the centred section links at the 960px edge. */
.tm-nav__actions .tm-btn--sm {
  padding-inline: 12px;
  font-size: 12px;
}

/* 用户登录 / 头像：直接挂站点的 <account> 组件（第二个 Vue 挂载点） */
.tm-nav__account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--tm-ink);
}

.tm-nav__toggle {
  display: none;
  align-items: center;
  height: 38px;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid var(--tm-border);
  border-radius: 19px;
  background: #fff;
  color: var(--tm-ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* -------------------------------------------------- buttons */
.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border-radius: 26px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.tm-btn--primary {
  background: var(--tm-primary);
  color: #fff;
}

.tm-btn--primary:hover {
  background: var(--tm-primary);
  filter: brightness(0.92);
}

.tm-btn--ghost {
  background: #fff;
  color: var(--tm-primary);
  border-color: var(--tm-primary);
}

.tm-btn--ghost:hover {
  background: var(--tm-primary-tint);
}

.tm-btn--sm {
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  font-size: 15px;
}

.tm-btn--block {
  width: 100%;
}

/* -------------------------------------------------- layout */
.tm-section {
  padding: 80px 0;
}

.tm-section--tint {
  background: var(--tm-primary-tint);
}

.tm-section--light {
  background: var(--tm-bg);
}

.tm-section--tight {
  padding: 56px 0;
}

.tm-head {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}

.tm-head--left {
  margin-left: 0;
  text-align: left;
}

.tm-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--tm-gray);
  margin: 0;
  text-wrap: pretty;
}

/* 导语里被强调的定义性短语（如公司定位）用正文色 + 加粗，避免在灰字里“看不见” */
.tm-lead strong {
  color: var(--tm-ink);
  font-weight: 700;
}

.tm-grid {
  display: grid;
  gap: 24px;
}

.tm-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tm-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tm-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tm-card {
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: 28px;
  box-sizing: border-box;
}

.tm-card--flat {
  border: 0;
  box-shadow: var(--tm-shadow);
}

.tm-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 900;
}

/* 卡片图标：无底色、直接放大线条图标，用内联 SVG，无需额外资源 */
.tm-card__icon {
  display: block;
  margin-bottom: 16px;
  color: var(--tm-primary);
}

.tm-card__icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

.tm-card p {
  margin: 0;
  color: var(--tm-gray);
  line-height: 1.7;
  text-wrap: pretty;
}

/* -------------------------------------------------- hero */
.tm-hero {
  /* 底部只留 40px：卖点行紧贴区块下边缘的那条分割线 */
  padding: 72px 0 40px;
  background:
    radial-gradient(1100px 420px at 82% -10%, var(--tm-primary-tint) 0%, rgba(255, 255, 255, 0) 70%),
    #fff;
  border-bottom: 1px solid var(--tm-border);
}

.tm-hero__inner {
  display: grid;
  /* 默认文案优先：hub 是纯文案 hero（右栏留空，不与目的地页抢图），
     地区页右栏是图片、用下面的 --media 变体 */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}

/* 右栏是图片的地区页：图片列反超文案列，视觉先行 */
.tm-hero__inner--media {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 44px;
}

.tm-hero h1 {
  margin: 0 0 18px;
  /* 与站点 LP hero 同规格（main.css .sologo-h1 桌面为 3.125rem，hero 降到 2.5rem） */
  font-size: 2.5rem;
  line-height: 1.3;
  max-width: 28ch;
  text-wrap: pretty;
}

.tm-hero__sub {
  font-size: 19px;
  line-height: 1.7;
  color: var(--tm-gray);
  margin: 0 0 22px;
  max-width: 42ch;
  text-wrap: pretty;
}

.tm-hero__pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 440px;
  margin: 0 0 24px;
}

.tm-hero__price {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 16px;
  border-left: 2px solid var(--tm-border);
}

.tm-hero__price:first-child {
  border-left-color: var(--tm-primary);
}

.tm-hero__price-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tm-gray);
}

.tm-hero__price-amount {
  font-size: 32px;
  line-height: 1.15;
  color: var(--tm-ink);
}

.tm-hero__price-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--tm-gray);
}

.tm-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* Hero 卖点：4 条一行，贴在区块底部（本身的 .tm-wrap 负责居中与左右内边距） */
.tm-hero__points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 48px auto 0;
}

.tm-hero__points li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--tm-ink);
}

.tm-hero__points svg {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--tm-primary);
}

.tm-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: url(../../images/check.svg) no-repeat center center / contain;
}

.tm-hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--tm-radius);
  overflow: hidden;
  /* 不用投影：投影让图片像“贴上去的卡片”，与背景分离 */
  background: transparent;
}

.tm-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  /* 3:2 = 素材原生比例，不做二次裁切，保留客户给的构图 */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* 融入背景：降对比 + 轻微提亮，让图片整体向白底靠；再轻微去饱和，
     减少蓝天与暖白背景的冲突。靠文字一侧渐隐，避免出现硬边。 */
  filter: saturate(0.9) brightness(1.04) contrast(0.98);
  -webkit-mask-image: linear-gradient(to left, #000 76%, transparent 100%);
  mask-image: linear-gradient(to left, #000 76%, transparent 100%);
}

.tm-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--tm-gray);
  text-wrap: pretty;
}

/* -------------------------------------------------- lists */
.tm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm-list li {
  position: relative;
  padding-left: 30px;
  margin: 14px 0;
  line-height: 1.7;
}

.tm-list--cross li::before {
  background: none;
  content: "\00d7";
  font-size: 20px;
  line-height: 18px;
  font-weight: 700;
  color: var(--tm-gray);
  text-align: center;
}

.tm-list--tight li {
  margin: 10px 0;
}

/* -------------------------------------------------- pricing */
.tm-price {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.tm-price__item {
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: 24px;
}

.tm-price__label {
  font-size: 15px;
  color: var(--tm-gray);
  margin: 0 0 8px;
}

.tm-price__amount {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--tm-primary);
}

.tm-price__note {
  font-size: 14px;
  color: var(--tm-gray);
  margin: 0;
}

/* -------------------------------------------------- steps */
.tm-steps {
  counter-reset: tmstep;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm-steps li {
  position: relative;
  counter-increment: tmstep;
  padding: 0 0 30px 62px;
  line-height: 1.75;
  border-left: 2px solid var(--tm-border);
  margin-left: 20px;
}

.tm-steps li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.tm-steps li::before {
  content: counter(tmstep);
  position: absolute;
  left: -21px;
  top: -4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tm-primary);
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-steps strong {
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}

/* How we work：流程 + 办公照片（中国页两栏；香港页暂无配图，仍是单栏居中） */
.tm-how__steps {
  max-width: 820px;
  margin: 0 auto;
}

.tm-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.tm-how__grid .tm-how__steps {
  max-width: none;
  margin: 0;
}

.tm-how__media {
  margin: 0;
}

.tm-how__media img {
  display: block;
  width: 100%;
  height: auto;
  /* 3:2 = 素材原生比例（965x641），不做二次裁切；与 hero 同为无投影、10px 圆角 */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--tm-radius);
}

/* Why 区块：左卡片 / 右标题+文案——与 Hero（文左图右）交替，避免两个相邻区块同一版式。
   DOM 顺序保持“文案在前”，靠 order 仅在桌面端调换，移动端恢复文案在前。 */
.tm-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.tm-why__cards {
  order: -1;
}

.tm-why__intro {
  text-align: left;
}

.tm-why__intro .tm-proof {
  max-width: none;
}

.tm-why__cards {
  gap: 20px;
}

/* 信任数据：段落式一行，只有数字用主色高亮（数字来自 tm.php 的 SOCIAL_PROOF_COUNT） */
.tm-proof {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tm-gray);
  text-wrap: pretty;
}

.tm-proof__value {
  font-weight: 900;
  color: var(--tm-primary);
}

/* 信任数据的截止日期：只做口径说明，比正文弱一档 */
.tm-proof__asof {
  font-size: 13px;
  color: var(--tm-gray);
}

.tm-search-entry__bridge {
  margin: 18px 0 0;
  color: var(--tm-gray);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.tm-search-entry__bridge a {
  color: var(--tm-ink);
  text-decoration-color: var(--tm-primary);
  text-underline-offset: 4px;
}

.tm-report-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.tm-report-actions > a {
  color: var(--tm-ink);
  text-decoration-color: var(--tm-primary);
  text-underline-offset: 4px;
}

/* FAQ：完整展开的静态列表，比折叠面板更轻（去掉面板边框与展开箭头） */
.tm-faq-wrap {
  max-width: 880px;
  margin: 0 auto;
}

.tm-faq-list {
  border-top: 1px solid var(--tm-border);
}

.tm-faq-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--tm-border);
}

.tm-faq-q {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--tm-ink);
  text-wrap: pretty;
}

.tm-faq-a {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--tm-gray);
  text-wrap: pretty;
}

/* 免责/边界说明：弱化并移到区块底部，不再用高亮底块 */
.tm-block-note {
  margin: 32px 0 0;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--tm-gray);
  text-wrap: pretty;
}

/* Pricing：2×2 四块（两个价格块 + Included + Not included），同行等高 */
.tm-pricing {
  align-items: stretch;
}

.tm-pricing__note {
  margin-top: 24px;
}

/* -------------------------------------------------- hub hero 的插画（16:9）
   素材：statics/assets/images/tm/hero-global.webp（1672×941 白底插画）。
   实测素材边缘：左边 0% 有内容、下边仅 1.3%（且极浅 239-246），
   而上边 7.4%、右边 65.9% 有内容 —— 正好适合"右上出血"：被裁掉的两侧本来就是画面的延续，
   可见的左/下两侧则几乎全是白，不会出现生硬的切边。
   因此不做任何裁剪/滤镜/遮罩，直接按原生比例铺上。 */
.tm-hero__art {
  /* 只做一件事：把盒子从"栏右边缘"延伸到"屏幕右边缘"。
     width 保持 auto（grid item 默认 stretch）、只给负的 margin-right，
     盒子就会自动长到屏幕右边，而**不需要**位移或裁切图片。
     素材右边缘本来就有内容（右 66% 有内容），到屏幕边即自然形成出血 ——
     图片自己完成出血，我们不再人为推挤。
     数值 = 栏右边缘到屏幕右边缘的距离：容器 1280（含 24 内边距）时即 (100vw − 1232)/2，
     窄于 1280 时固定 24px（就是容器内边距）。
     ≤959.98px（单栏）时整个隐藏 —— 见文件末尾的响应式块。 */
  margin: 0 calc(-1 * max(24px, (100vw - 1232px) / 2)) 0 0;
}

.tm-hero__art img {
  display: block;
  width: 100%;
  height: auto;
  /* 素材原生 16:9，不二次裁切 */
  aspect-ratio: 16 / 9;
  /* 不做滤镜、不加渐隐遮罩：
     素材左右两侧本来就是纯白（左边 0% 有内容、下边 1.3% 且极浅），与白底页面无缝，
     没有硬边需要藏；再用滤镜/遮罩去"改造"客户给的画面，只会把真实内容擦掉。 */
}

/* -------------------------------------------------- 正文链接基线
   频道内除导航/页脚/按钮外，还有正文里的链接（返回链接、Privacy Policy、
   列表交叉内链）。此前没有任何基线规则，浏览器默认样式直接生效，表现为
   "下划线 + 蓝/紫（:visited 紫色）"，与品牌页完全不搭。

   ⚠️ :where() 必须包住**整个复合选择器**（踩过的坑）：
   写成 `:where(.tm-page) a:visited` 时，:where() 里的 .tm-page 算 0，
   但 `a:visited` 还留在外面 → 实际优先级是 (0,1,1)，
   会压过 .tm-btn--primary / .tm-brand__word 的 (0,1,0)，表现为：
   - 页头 CTA 与 Logo 文字**一旦被访问过就变成主色**（:visited 命中）；
   - hover 页头链接时多出一条下划线。
   把整串放进 :where() 才是真正的 0 优先级：只做兜底，组件类规则永远赢。
   改这两行时务必用 hover / :visited 两种状态各验一次页头。 */
:where(.tm-page a),
:where(.tm-page a:visited) {
  color: var(--tm-primary);
  text-decoration: none;
}

:where(.tm-page a:hover) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------------------------------------- hub 目的地卡片的地区图
   复用各地区的 hero 素材（同一张图，原生 3:2），与 D24 的"照片不加投影"约定一致。 */
.tm-dest__media {
  display: block;
  width: 100%;
  /* height 属性是表现层提示，会覆盖 aspect-ratio；必须显式 height:auto 才按 3:2 出图 */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--tm-radius);
  margin: 0 0 20px;
}

/* -------------------------------------------------- 列表内的内联链接（如 Not included 里的交叉内链） */
.tm-list a {
  color: var(--tm-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------------------------------------- form */
.tm-form {
  display: grid;
  gap: 20px;
}

/* 无边框分组：地区多选与 Additional 选项共用（fieldset 自带 margin/padding/border，
   这里清掉，让 legend 与 .tm-field label 视觉对齐） */
.tm-field--group {
  margin: 0;
  padding: 0;
  border: 0;
}

.tm-field--group legend {
  display: block;
  padding: 0;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

.tm-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tm-picker__option {
  /* 单类即可：基座 label 规则已用 :where() 降为 0 优先级 */
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  margin-bottom: 0;
  padding: 14px 16px;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tm-picker__option:hover {
  border-color: var(--tm-primary);
}

/* 选中态由 :has() 驱动，不必额外写 JS */
.tm-picker__option:has(input:checked) {
  border-color: var(--tm-primary);
  background: var(--tm-primary-tint);
}

/* 键盘焦点要可见（原生 checkbox 被藏起来后仍然可达） */
.tm-picker__option:has(input:focus-visible) {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}

.tm-picker__option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tm-primary);
  flex-shrink: 0;
}

.tm-picker__name {
  font-size: 16px;
  color: var(--tm-ink);
}

:where(.tm-field) label {
  /* 必须 :where() 包住整个选择器 → 优先级 0，只给"输入框标题"做兜底。
     写成 .tm-field label（0,1,1）会压过 .tm-consent / .tm-picker__option（0,1,0）：
     表现为勾选框与文字贴在一起、字重变 700（这个坑踩过两次，别再改回去）。 */
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

.tm-field .tm-req {
  color: var(--tm-primary);
}

.tm-field input[type="text"],
.tm-field input[type="email"],
.tm-field select,
.tm-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-size: 16px;
  font-family: inherit;
  color: var(--tm-ink);
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  outline: none;
}

.tm-field input:focus,
.tm-field select:focus,
.tm-field textarea:focus {
  border-color: var(--tm-primary);
}

.tm-field textarea {
  min-height: 120px;
  resize: vertical;
}

.tm-field__hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--tm-gray);
}

.tm-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tm-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* 上方可能是另一个 consent 行（如 Additional），留出行间距 */
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--tm-gray);
  line-height: 1.6;
  /* 显式写 400：放进 .tm-field 分组里的 consent（如 Additional）会继承到
     :where(.tm-field) label 的 700，与直接放在 form 下的 I agree 行不一致。 */
  font-weight: 400;
}

.tm-consent input {
  margin-top: 4px;
}

/* -------------------------------------------------- 蜜罐字段（反机器人）
   移出视口而不是 display:none —— 后者容易被自动填表脚本识别为"不用填"。
   同时用 tabindex=-1 + aria-hidden 保证键盘与读屏用户完全碰不到它。 */
.tm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------- 图样上传区（简洁版）
   之前借用了 image-to-logo 页的上传插图（upload-blank.webp），那是别的产品的画面，
   放在这里不对。现在只用一个 stroke 图标（Lucide `upload`，见模板注释）+ 文案，
   选图后切换成缩略图预览。
   交互：整块可点（透明 file input 铺满）；支持拖入；拖入时主色虚线框。 */
.tm-upload {
  position: relative;
  display: block;
  padding: 24px 20px;
  border: 1px dashed var(--tm-border);
  border-radius: var(--tm-radius);
  background: #fff;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tm-upload:hover,
.tm-upload.is-dragover {
  border-color: var(--tm-primary);
  background: var(--tm-primary-tint);
}

/* 透明 input 铺满整块：点哪都能选文件 */
.tm-upload input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.tm-upload__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.tm-upload__empty[hidden] {
  display: none;
}

.tm-upload__icon {
  width: 28px;
  height: 28px;
  color: var(--tm-primary);
}

.tm-upload__hint {
  font-size: 15px;
  color: var(--tm-gray);
}

.tm-upload__preview {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  /* 预览态下让点击落在 Remove 上，而不是又弹一次文件选择 */
  pointer-events: none;
}

.tm-upload__preview[hidden] {
  display: none;
}

.tm-upload__thumb {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: contain;
  border: 1px solid var(--tm-border);
  border-radius: 8px;
  background: #fff;
}

.tm-upload__meta {
  min-width: 0;
}

.tm-upload__name {
  display: block;
  font-size: 15px;
  color: var(--tm-ink);
  word-break: break-all;
}

.tm-upload__actions {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}

.tm-upload__action {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--tm-primary);
  cursor: pointer;
  pointer-events: auto;
}

.tm-upload__action--muted {
  color: var(--tm-gray);
}

.tm-upload__action:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 已选态必须让透明 input 让位：它是 absolute，会盖在静态预览块之上，
   否则点 Replace/Remove 时命中的都是它（实测 elementFromPoint 命中的就是 INPUT），
   表现成"两个按钮都只会弹出文件选择"。让位后由 .tm-upload__action 显式调用 input.click()。 */
.tm-upload.is-filled input[type="file"] {
  pointer-events: none;
}

.tm-form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.tm-alert {
  display: none;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.7;
}

.tm-alert.is-visible {
  display: block;
}

.tm-alert--ok {
  background: #eaf8f2;
  color: #1c7a58;
}

.tm-alert--err {
  background: #fdeceb;
  color: #a52417;
}

/* -------------------------------------------------- footer
   页脚复用站点 .sologo-footer 排版体系，仅做外层对齐 */
.sologo-footer.tm-footer {
  padding-left: 0;
  padding-right: 0;
  background: var(--tm-bg);
  border-top: 1px solid var(--tm-border);
  margin-top: 0;
}

.tm-footer .navigation {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* -------------------------------------------------- misc */
.tm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--tm-primary-tint);
  color: var(--tm-primary);
  font-size: 14px;
  font-weight: 700;
}

.tm-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  overflow: hidden;
}

.tm-table th,
.tm-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tm-border);
  font-size: 15px;
}

.tm-table th {
  background: var(--tm-gray-light);
  font-weight: 700;
}

.tm-table tr:last-child td {
  border-bottom: 0;
}

.tm-center {
  text-align: center;
}

.tm-mt-8 {
  margin-top: 8px;
}

.tm-mt-16 {
  margin-top: 16px;
}

.tm-mt-24 {
  margin-top: 24px;
}

.tm-mt-32 {
  margin-top: 32px;
}

/* -------------------------------------------------- responsive */
@media (max-width: 959.98px) {
  .tm-nav__toggle {
    display: inline-flex;
  }

  .tm-nav__actions {
    display: none;
  }

  .tm-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 18px;
    right: 18px;
    transform: none;
    margin: 0;
    padding: 14px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    box-shadow: var(--tm-shadow);
  }

  .tm-nav.is-open .tm-nav__links {
    display: flex;
  }

  .tm-nav__links > a {
    padding: 12px 0;
  }

  /* 移动端：注册地不进下拉，直接展开成列表（少一次点击） */
  .tm-nav__trigger {
    display: none;
  }

  .tm-nav__group {
    display: block;
    position: static;
    align-self: auto;
  }

  .tm-nav__menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .tm-nav__menu-item {
    padding: 12px 0;
    border-radius: 0;
  }

  .tm-nav__menu-note {
    display: none;
  }

  .tm-nav__menu-all {
    margin-top: 0;
    padding: 12px 0;
  }

  .tm-nav__links-cta {
    display: block;
    margin-top: 8px;
    padding-top: 14px !important;
    border-top: 1px solid var(--tm-border);
    color: var(--tm-primary) !important;
    font-weight: 700;
  }

  .tm-hero {
    padding: 48px 0 40px;
  }

  .tm-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* 单栏就从这里开始（同一个断点），hero 插画一并隐藏：
     它靠"比栏宽 + 右上出血"成立，单栏里出血没有着力点，缩成一张居中图又只是把首屏顶长；
     隐藏后 hero 回到纯文案 + 卖点行。 */
  .tm-hero__art {
    display: none;
  }

  .tm-hero__sub {
    font-size: 17px;
    max-width: none;
  }

  /* 移动端回落到 main.css 的 .sologo-h1 尺寸，避免 hero 标题过大 */
  .tm-hero h1 {
    font-size: 1.75rem;
    max-width: none;
  }

  /* 卖点行在窄屏放不下一行，改 2×2 */
  .tm-hero__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 36px;
  }

  /* How we work 两栏在窄屏改为上下堆叠 */
  .tm-how__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* Why 区块同样改上下堆叠，且恢复“文案在前”（桌面端卡片在左） */
  .tm-why {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .tm-why__cards {
    order: 0;
  }

  /* 移动端图文堆叠，图片在文字下方：渐隐改为上缘，同理消除硬边 */
  .tm-hero__media img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
  }

  .tm-section {
    padding: 52px 0;
  }

  .tm-grid--2,
  .tm-grid--3,
  .tm-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-price,
  .tm-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 599.98px) {
  .tm-wrap {
    padding: 0 18px;
  }

  .tm-nav__inner {
    gap: 12px;
    min-height: 64px;
    padding: 0 18px;
  }

  /* 窄屏下地区勾选项改为单列（两列会把 "Hong Kong" 挤换行） */
  .tm-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .tm-brand__word {
    font-size: 22px;
  }

  .tm-brand__mark {
    height: 23px;
  }

  .tm-grid--2,
  .tm-grid--3,
  .tm-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .tm-price__amount {
    font-size: 36px;
  }

  .tm-card {
    padding: 22px;
  }
}