:root {
  --experience-ink: #0f1f3d;
  --experience-ink-soft: #33415d;
  --experience-muted: #66738b;
  --experience-faint: #8c97ab;
  --experience-blue: #2457e6;
  --experience-blue-dark: #173f9f;
  --experience-blue-soft: #eaf0ff;
  --experience-teal: #12a88e;
  --experience-line: #dce5f3;
  --experience-line-soft: #e8eef8;
  --experience-ice: #f2f6fc;
  --experience-field: #f5f8fd;
  --experience-white: #ffffff;
  --experience-radius-lg: 26px;
  --experience-radius-md: 14px;
  --experience-radius-sm: 11px;
  --experience-stage-height: 640px;
  --experience-shadow-card:
    0 1px 2px rgba(24, 44, 84, 0.05),
    0 12px 28px -12px rgba(24, 44, 84, 0.14),
    0 40px 80px -32px rgba(24, 44, 84, 0.22);
  --experience-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.trial-experience-body {
  min-height: 100vh;
  background: var(--experience-ice);
  color: var(--experience-ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.trial-experience-main {
  min-height: calc(100vh - 80px);
  padding-top: 80px;
}

.trial-experience-page {
  position: relative;
  min-height: calc(100vh - 80px);
  overflow: clip;
  padding: 42px 24px 72px;
  /* 单一浅色底。原来叠了三层 radial + 一层 linear，还有网格纹理和两个轨道圆环，
     它们不表达任何状态，只是在和唯一该被看见的东西——表单——抢注意力 */
  background: var(--experience-ice);
}

.trial-experience-container {
  position: relative;
  z-index: 1;
  width: min(100%, 1080px);
  margin: 0 auto;
}

.trial-experience-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  color: var(--experience-faint);
  font-size: 13px;
}

.trial-experience-breadcrumb svg {
  flex: 0 0 auto;
  opacity: 0.5;
}

.trial-experience-breadcrumb a {
  color: #58667f;
  text-decoration: none;
  transition: color 180ms var(--experience-ease);
}

.trial-experience-breadcrumb a:hover {
  color: var(--experience-blue);
}

.trial-experience-breadcrumb [aria-current="page"] {
  color: var(--experience-ink-soft);
  font-weight: 600;
}

.trial-experience-intro {
  display: grid;
  /* 右列 auto：说明卡按自身内容定宽，不跟标题抢空间 */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  /* 底对齐 —— 标题最后一行的基线和卡片下沿同高，两块才像同一层 */
  align-items: end;
  margin-bottom: 26px;
}

.trial-experience-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: var(--experience-blue);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.16em;
}

/* 短横线把这行标签锚在左边距上，避免它悬空成一句无主的英文 */
.trial-experience-eyebrow::before {
  width: 22px;
  height: 2px;
  content: "";
  background: var(--experience-blue);
}

.trial-experience-intro h1 {
  /* 单位用 em 而非 ch —— ch 按拉丁「0」字宽计算，对中文约小一半，会造成提前折行 */
  max-width: 16em;
  margin: 0;
  color: var(--experience-ink);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.16;
}

.trial-experience-intro p {
  /* 宽到足以一行放下整句，避免中文在「接/听」这类词中间断开 */
  max-width: 42em;
  margin: 15px 0 0;
  color: var(--experience-muted);
  font-size: 14.5px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* 说明卡：回答用户在填第一个字之前最想问的「这要花我多久」。
   毛玻璃 + 极浅描边，让它浮在页面底色上而不是又一块实心面板 */
.trial-experience-signal {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 330px;
  padding: 18px 20px;
  border: 1px solid rgba(36, 87, 230, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 36px rgba(38, 65, 118, 0.08);
  backdrop-filter: blur(14px);
}

.trial-experience-signal-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 54px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--experience-blue-soft);
}

.trial-experience-signal-visual span {
  width: 3px;
  border-radius: 99px;
  background: var(--experience-blue);
}

/* 中间高两边低的对称波形——是「一通电话」的图形速记，不是随机装饰 */
.trial-experience-signal-visual span:nth-child(1),
.trial-experience-signal-visual span:nth-child(7) { height: 9px; opacity: 0.42; }
.trial-experience-signal-visual span:nth-child(2),
.trial-experience-signal-visual span:nth-child(6) { height: 18px; opacity: 0.58; }
.trial-experience-signal-visual span:nth-child(3),
.trial-experience-signal-visual span:nth-child(5) { height: 28px; opacity: 0.76; }
.trial-experience-signal-visual span:nth-child(4) { height: 36px; }

.trial-experience-signal strong,
.trial-experience-signal span {
  display: block;
}

.trial-experience-signal strong {
  margin-bottom: 5px;
  color: var(--experience-ink);
  font-size: 14px;
  font-weight: 700;
}

.trial-experience-signal > div:last-child > span {
  color: var(--experience-muted);
  font-size: 12px;
}

.trial-experience-workspace {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(163, 182, 214, 0.4);
  border-radius: var(--experience-radius-lg);
  background: var(--experience-white);
  box-shadow: var(--experience-shadow-card);
}

.trial-experience-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  overflow: hidden;
  /* 深色面 + 一层 30px 方格纹理。透明度压到 0.03，正常视距下只感觉这块"有材质"，
     不会数出格子——原先叠的两层 radial 和右下角装饰圆环才是抢注意力的部分，那些不要 */
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    #111f3f;
  background-size: 30px 30px;
  color: #fff;
}

.trial-experience-rail-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
}

.trial-experience-rail-heading span {
  color: #8496b4;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.trial-experience-steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trial-experience-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  min-height: 92px;
  color: #7b8caa;
}

/* 连接线：底轨 + 一条按进度点亮的覆盖线，让「走到哪了」一眼可读 */
.trial-experience-steps li:not(:last-child)::before,
.trial-experience-steps li:not(:last-child)::after {
  position: absolute;
  top: 40px;
  bottom: 4px;
  left: 18px;
  width: 2px;
  border-radius: 2px;
  content: "";
}

.trial-experience-steps li:not(:last-child)::before {
  background: rgba(160, 178, 210, 0.16);
}

.trial-experience-steps li:not(:last-child)::after {
  background: linear-gradient(180deg, rgba(18, 168, 142, 0.85), rgba(18, 168, 142, 0.32));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 480ms var(--experience-ease);
}

.trial-experience-steps li.is-done:not(:last-child)::after {
  transform: scaleY(1);
}

.trial-experience-step-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(160, 178, 210, 0.24);
  border-radius: 12px;
  background: rgba(28, 52, 100, 0.85);
  color: #7b8caa;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  transition:
    border-color 260ms var(--experience-ease),
    background 260ms var(--experience-ease),
    color 260ms var(--experience-ease),
    box-shadow 260ms var(--experience-ease);
}

.trial-experience-steps li strong,
.trial-experience-steps li div span {
  display: block;
}

.trial-experience-steps li strong {
  margin: 1px 0 6px;
  color: #a3b2cb;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color 260ms var(--experience-ease);
}

.trial-experience-steps li div span {
  font-size: 12px;
  line-height: 1.55;
}

/* 当前步：唯一的实心蓝，是这一列里最亮的点。
   外发光让它从方格纹理里浮起来一层，"我在这一步"因此不用读文字就成立 */
.trial-experience-steps li.is-current .trial-experience-step-marker {
  border-color: rgba(126, 163, 255, 0.9);
  background: #2b5ee4;
  color: #fff;
  box-shadow: 0 8px 22px rgba(30, 87, 230, 0.38);
}

.trial-experience-steps li.is-current strong {
  color: #fff;
}

.trial-experience-steps li.is-current div span {
  color: #b9c7de;
}

.trial-experience-steps li.is-done .trial-experience-step-marker {
  border-color: rgba(45, 200, 168, 0.42);
  background: rgba(18, 168, 142, 0.16);
  color: transparent;
  box-shadow: none;
}

/* 已完成步用对勾替换序号，序号本身不再是有效信息 */
.trial-experience-steps li.is-done .trial-experience-step-marker::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 7px;
  border: 2px solid #4fdcbe;
  border-top: 0;
  border-right: 0;
  content: "";
  transform: translate(-50%, -70%) rotate(-45deg);
}

.trial-experience-steps li.is-done strong {
  color: #becbdf;
}

.trial-experience-trust-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 13px 14px;
  border: 1px solid rgba(160, 178, 210, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  color: #a3b2cb;
  font-size: 12px;
  line-height: 1.5;
}

.trial-experience-trust-note svg {
  flex: 0 0 auto;
  color: #4fdcbe;
}

.trial-experience-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  /* 固定高度而非 min-height：各步内容自然高在 484–549px 之间，
     用 min-height 时卡片会随步骤在 620–685px 之间跳动。锁死后切步骤只换内容，边框不动。
     内容超出时由下面的 overflow 兜底，而不是让卡片变形 */
  height: var(--experience-stage-height);
  padding: 34px 52px 36px;
  background: var(--experience-white);
  transition: background-color 260ms var(--experience-ease);
}

/* 等待态（第 2、5 步）整面转灰。
   loading 视频的 rgb(237,241,247) 底色是烘进 mp4 的，让承载面用同一个灰，
   视频边界自然消失，不必再给它描边把那块灰"解释"成一个控件 */
.trial-experience-stage.is-loading {
  background: rgb(237, 241, 247);
}

/* 表单步骤靠顶对齐（见下方 flex: 0 0 auto），但等待态没有"从上往下读"这回事，
   偏上会读成加载卡住。这一步让 .trial-flow 撑满，交回给 .trial-loading 自己居中 */
.trial-experience-stage.is-loading .trial-flow {
  flex: 1;
}

.trial-experience-form-shell {
  display: flex;
  flex: 1 1 0%;
  width: min(100%, 600px);
  min-height: 0;
  max-height: 100%;
  flex-direction: column;
  margin: 0 auto;
  /* 安全阀：校验报错、关键词模式等把内容顶高时滚动，而不是撑破固定高度。
     常规状态下不会触发。gutter 常驻避免出现滚动条时内容左右抖动 */
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* 内层内容不溢出或已经到边界时，继续把纵向手势交给外层页面 */
  overscroll-behavior: auto;
  touch-action: pan-y;
  /* 给吸附操作栏留出安全区，校验失败时聚焦字段不会被按钮盖住 */
  scroll-padding-block: 20px 84px;
  -webkit-overflow-scrolling: touch;
}

/* 第 3 步字段数量固定，但窄网页视口或系统放大字体时仍可能超出表单视口；
   保留纵向滚动，避免底部字段被吸附操作栏遮住且无法访问。 */
.trial-experience-stage.is-compact .trial-experience-form-shell {
  overflow-y: auto;
  overscroll-behavior: auto;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

/* Keep the final field clear of the sticky action bar when this step overflows. */
.trial-experience-stage.is-compact .trial-flow-step > form {
  padding-bottom: 84px;
}

/* 每个可见步骤占满同一个表单视口；内容变长时由 form-shell 负责滚动，
   短内容则把操作栏推到同一条底线。 */
.trial-experience-form-shell .trial-flow,
.trial-experience-form-shell .trial-flow-step:not(.trial-loading),
.trial-experience-form-shell .trial-flow-step > form {
  display: flex;
  flex-direction: column;
}

.trial-experience-form-shell .trial-flow {
  flex: 1 0 auto;
  min-height: 100%;
}

.trial-experience-form-shell .trial-flow-step:not(.trial-loading) {
  flex: 1 0 auto;
  min-height: 100%;
}

.trial-experience-form-shell .trial-flow-step > form {
  flex: 1 0 auto;
  min-height: 0;
}

.trial-experience-form-shell .trial-flow-step > form > .trial-modal-submit,
.trial-experience-form-shell .trial-flow-step > form > .trial-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: auto;
}

.trial-experience-form-shell .trial-flow-step > form > .trial-modal-actions {
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--experience-white) 34%);
}

.trial-experience-form-shell .trial-steps {
  display: none;
}

.trial-experience-form-shell .trial-modal-title {
  margin: 0 0 8px;
  color: var(--experience-ink);
  font-size: clamp(24px, 2.5vw, 29px);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.26;
}

.trial-experience-form-shell .trial-modal-desc {
  margin: 0 0 26px;
  color: var(--experience-muted);
  font-size: 14px;
  line-height: 1.75;
}

/* Step 3 has five fields; keep its normal desktop layout within the fixed stage. */
.trial-experience-stage.is-compact .trial-modal-desc {
  margin-bottom: 12px;
}

.trial-experience-stage.is-compact .trial-modal-field {
  margin-bottom: 10px;
}

.trial-experience-stage.is-compact .trial-modal-input {
  min-height: 44px;
  padding: 10px 13px;
}

.trial-experience-form-shell .trial-modal-field {
  margin-bottom: 18px;
}

.trial-experience-form-shell .trial-modal-label {
  margin-bottom: 8px;
  color: var(--experience-ink-soft);
  font-size: 13px;
  font-weight: 650;
}

.trial-experience-form-shell .trial-modal-input {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--experience-line);
  border-radius: var(--experience-radius-sm);
  /* 比面板略沉一档 —— 这是「这里可以输入」的唯一无字提示 */
  background: var(--experience-field);
  color: var(--experience-ink);
  font-size: 14px;
  transition:
    border-color 180ms var(--experience-ease),
    box-shadow 180ms var(--experience-ease),
    background 180ms var(--experience-ease);
}

.trial-experience-form-shell .trial-modal-input::placeholder {
  color: #9aa5b8;
}

.trial-experience-form-shell .trial-modal-input:hover:not(:focus) {
  border-color: #c6d3e6;
}

.trial-experience-form-shell .trial-modal-input:focus {
  border-color: var(--experience-blue);
  background: var(--experience-white);
  box-shadow: 0 0 0 4px rgba(36, 87, 230, 0.1);
}

.trial-experience-form-shell .trial-modal-textarea {
  min-height: 126px;
  line-height: 1.75;
  resize: vertical;
}

.trial-experience-form-shell .trial-input-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 表单容器是 flex column，不加 align-self 会被拉成满宽，读起来像导航条而非分段控件 */
  align-self: start;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid var(--experience-line-soft);
  border-radius: var(--experience-radius-sm);
  background: var(--experience-field);
}

.trial-experience-form-shell .trial-input-mode-switch button {
  min-height: 34px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f7c93;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition:
    background 200ms var(--experience-ease),
    color 200ms var(--experience-ease),
    box-shadow 200ms var(--experience-ease);
}

.trial-experience-form-shell .trial-input-mode-switch button:hover:not(.is-active) {
  color: var(--experience-ink-soft);
}

.trial-experience-form-shell .trial-input-mode-switch button.is-active {
  background: var(--experience-white);
  color: var(--experience-blue);
  box-shadow:
    0 1px 2px rgba(24, 44, 84, 0.06),
    0 4px 10px -4px rgba(24, 44, 84, 0.16);
}

.trial-experience-form-shell .trial-examples {
  margin-bottom: 20px;
}

.trial-experience-form-shell .trial-examples__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--experience-ink-soft);
  font-size: 12px;
  font-weight: 650;
}

.trial-experience-form-shell .trial-examples__hint {
  color: var(--experience-faint);
  font-weight: 400;
}

.trial-experience-form-shell .trial-examples__list {
  display: grid;
  gap: 8px;
}

.trial-experience-form-shell .trial-example-chip {
  position: relative;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--experience-line-soft);
  border-radius: 10px;
  background: var(--experience-field);
  color: #56637b;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 180ms var(--experience-ease),
    background 180ms var(--experience-ease),
    color 180ms var(--experience-ease),
    transform 180ms var(--experience-ease);
}

.trial-experience-form-shell .trial-example-chip:hover {
  border-color: rgba(36, 87, 230, 0.3);
  background: #f3f7ff;
  color: var(--experience-blue-dark);
  transform: translateX(2px);
}

.trial-experience-form-shell .trial-keyword-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 行距原本是 0：.trial-keyword-field 不是 .trial-modal-field，拿不到那 18px 的下边距，
     于是第二行的标签直接贴在第一行输入框上，四个字段糊成一块。行距要略大于列距，
     不然两行会读成一个 2×2 的网格，而不是四个各自独立的字段 */
  gap: 20px 14px;
  /* 最后一行到「下一步」之间同样是 0，按钮像是长在输入框上 */
  margin-bottom: 24px;
}

.trial-experience-form-shell .trial-keyword-field {
  min-width: 0;
}

.trial-experience-form-shell .trial-keyword-field .trial-modal-label span {
  margin-left: 4px;
  color: var(--experience-faint);
  font-weight: 400;
}

.trial-experience-form-shell .trial-modal-submit,
.trial-experience-form-shell .trial-modal-actions .trial-modal-submit {
  min-height: 50px;
  border: 0;
  border-radius: var(--experience-radius-sm);
  background: linear-gradient(180deg, #2e63ea, var(--experience-blue));
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    0 1px 2px rgba(23, 63, 159, 0.24),
    0 10px 24px -8px rgba(36, 87, 230, 0.55);
  transition:
    background 200ms var(--experience-ease),
    transform 200ms var(--experience-ease),
    box-shadow 200ms var(--experience-ease);
}

.trial-experience-form-shell .trial-modal-submit:hover {
  background: linear-gradient(180deg, #2b5ce0, var(--experience-blue-dark));
  box-shadow:
    0 1px 2px rgba(23, 63, 159, 0.28),
    0 14px 30px -8px rgba(36, 87, 230, 0.6);
  transform: translateY(-1px);
}

.trial-experience-form-shell .trial-modal-submit:active {
  box-shadow: 0 1px 2px rgba(23, 63, 159, 0.3);
  transform: translateY(0);
}

.trial-experience-form-shell .trial-modal-btn-back {
  min-height: 50px;
  padding: 0 22px;
  border-color: var(--experience-line);
  border-radius: var(--experience-radius-sm);
  background: var(--experience-white);
  color: #56637b;
  font-weight: 600;
  transition:
    border-color 180ms var(--experience-ease),
    background 180ms var(--experience-ease),
    color 180ms var(--experience-ease);
}

.trial-experience-form-shell .trial-modal-btn-back:hover {
  border-color: #bccbe1;
  background: var(--experience-field);
  color: var(--experience-ink-soft);
}

.trial-experience-stage.is-compact .trial-modal-submit,
.trial-experience-stage.is-compact .trial-modal-btn-back {
  min-height: 46px;
}

.trial-experience-stage.is-compact .trial-experience-form-shell .trial-flow-step > form > .trial-modal-actions {
  padding-top: 8px;
}

.trial-experience-form-shell .trial-captcha-svg {
  width: 112px;
  height: 48px;
  border-color: var(--experience-line);
  border-radius: 10px;
  background: var(--experience-field);
  transition: border-color 180ms var(--experience-ease), background 180ms var(--experience-ease);
}

.trial-experience-form-shell .trial-captcha-svg:hover {
  border-color: rgba(36, 87, 230, 0.34);
  background: #f0f5ff;
}

.trial-experience-form-shell .trial-captcha-svg > div,
.trial-experience-form-shell .trial-captcha-svg svg {
  width: 100%;
  height: 100%;
}

.trial-experience-form-shell .trial-captcha-svg svg {
  display: block;
  object-fit: contain;
}

.trial-experience-form-shell .trial-captcha-svg svg image {
  width: 100%;
  height: 100%;
}

/* 同意条是转化路径上最后一道摩擦，给它一块底让勾选目标更明确 */
.trial-experience-form-shell .trial-consent-field {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--experience-line-soft);
  border-radius: var(--experience-radius-sm);
  background: var(--experience-field);
}

.trial-experience-form-shell .trial-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  color: #6a7690;
  font-size: 12.5px;
  line-height: 1.7;
}

.trial-experience-form-shell .trial-consent-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--experience-blue);
}

.trial-experience-form-shell .trial-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: auto;
  pointer-events: auto;
}

.trial-experience-form-shell .trial-consent-label a {
  color: var(--experience-blue);
  font-weight: 600;
  text-underline-offset: 2px;
}

.trial-experience-form-shell .trial-loading {
  flex: 1;
  min-height: 430px;
  padding: 12px 0 0;
  gap: 14px;
}

.trial-experience-form-shell .trial-loading-spinner {
  width: 38px;
  height: 38px;
  /* 轨道色跟着灰底走，白色轨在灰面上会亮成一个环 */
  border-color: #dde5f1;
  border-top-color: var(--experience-blue);
}

.trial-experience-form-shell .trial-loading-text {
  color: var(--experience-ink);
  font-size: 16px;
  font-weight: 650;
}

.trial-experience-form-shell .trial-loading-note {
  max-width: 520px;
  min-height: 42px;
  color: var(--experience-muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* 承载面已与视频同色，不再需要边框把它圈起来 */
.trial-experience-form-shell .trial-loading-video {
  width: min(100%, 390px);
  height: 300px;
  margin-top: 0;
  background: transparent;
  object-fit: contain;
}

.trial-experience-form-shell .trial-modal-error--global {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 10px;
  background: #fff5f5;
  text-align: left;
}

.trial-experience-form-shell button:focus-visible,
.trial-experience-form-shell input:focus-visible,
.trial-experience-form-shell textarea:focus-visible,
.trial-experience-form-shell .trial-consent-label a:focus-visible,
.trial-experience-footnote a:focus-visible,
.trial-experience-breadcrumb a:focus-visible {
  outline: 3px solid rgba(36, 87, 230, 0.25);
  outline-offset: 3px;
}

.trial-experience-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 4px 0;
  color: var(--experience-faint);
  font-size: 12px;
}

.trial-experience-footnote a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--experience-blue);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 180ms var(--experience-ease);
}

.trial-experience-footnote a::after {
  content: "→";
  font-weight: 500;
  transition: transform 220ms var(--experience-ease);
}

.trial-experience-footnote a:hover {
  color: var(--experience-blue-dark);
  text-decoration: underline;
}

.trial-experience-footnote a:hover::after {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  /* 两列并排会把标题挤到提前折行，改成上下堆叠；卡片收成内容宽度，不摊平成横条 */
  .trial-experience-intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .trial-experience-signal {
    width: fit-content;
  }

  .trial-experience-workspace {
    display: block;
  }

  .trial-experience-rail {
    padding: 22px 24px;
  }

  .trial-experience-trust-note {
    display: none;
  }

  .trial-experience-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .trial-experience-steps li {
    display: block;
    min-height: 0;
    text-align: center;
  }

  /* 横向布局下连接线转 90°，两条轨道（底轨 + 进度轨）一起改 */
  .trial-experience-steps li:not(:last-child)::before,
  .trial-experience-steps li:not(:last-child)::after {
    top: 18px;
    right: auto;
    bottom: auto;
    left: calc(50% + 20px);
    width: calc(100% - 30px);
    height: 2px;
  }

  .trial-experience-steps li:not(:last-child)::after {
    background: #12a88e;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 480ms var(--experience-ease);
  }

  .trial-experience-steps li.is-done:not(:last-child)::after {
    transform: scaleX(1);
  }

  .trial-experience-step-marker {
    margin: 0 auto 9px;
  }

  .trial-experience-steps li strong {
    margin: 0;
    font-size: 12px;
  }

  .trial-experience-steps li div span {
    display: none;
  }

  .trial-experience-stage {
    --experience-stage-height: 600px;
    height: var(--experience-stage-height);
    padding: 28px 34px 32px;
  }
}

@media (max-width: 640px) {
  .trial-experience-main {
    min-height: calc(100dvh - 5rem - env(safe-area-inset-top, 0px));
    padding-top: calc(5rem + env(safe-area-inset-top, 0px));
  }

  .trial-experience-page {
    min-height: calc(100dvh - 5rem - env(safe-area-inset-top, 0px));
    padding: 18px 12px calc(44px + env(safe-area-inset-bottom, 0px));
  }

  .trial-experience-breadcrumb {
    display: none;
  }

  .trial-experience-intro {
    gap: 14px;
    margin-bottom: 18px;
  }

  .trial-experience-eyebrow {
    gap: 7px;
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  .trial-experience-eyebrow::before {
    width: 18px;
  }

  .trial-experience-intro h1 {
    font-size: clamp(27px, 7.6vw, 33px);
    letter-spacing: -0.038em;
    line-height: 1.2;
  }

  .trial-experience-intro p {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.65;
  }

  /* 手机上摊满宽、压扁成一行；副句省掉，"约 2 分钟"才是要传达的 */
  .trial-experience-signal {
    width: 100%;
    min-width: 0;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }

  .trial-experience-signal-visual {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .trial-experience-signal strong {
    margin-bottom: 0;
    font-size: 13px;
  }

  .trial-experience-signal > div:last-child > span {
    display: none;
  }

  .trial-experience-workspace {
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(32, 56, 102, 0.12);
  }

  .trial-experience-rail {
    padding: 14px 12px 12px;
  }

  .trial-experience-rail-heading {
    margin-bottom: 12px;
  }

  .trial-experience-rail-heading span {
    font-size: 10px;
  }

  .trial-experience-steps {
    gap: 4px;
  }

  .trial-experience-step-marker {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 10px;
  }

  .trial-experience-steps li strong {
    font-size: 10.5px;
    line-height: 1.25;
  }

  .trial-experience-steps li:not(:last-child)::before,
  .trial-experience-steps li:not(:last-child)::after {
    top: 14px;
    left: calc(50% + 15px);
    width: calc(100% - 20px);
  }

  .trial-experience-stage {
    display: flex;
    flex-direction: column;
    /* 同一视口内各步骤保持同高，同时给短屏设备留出可用空间。 */
    --experience-stage-height: clamp(560px, calc(100dvh - 160px), 640px);
    height: var(--experience-stage-height);
    min-height: 0;
    padding: 20px 16px 24px;
    scroll-margin-top: calc(5rem + env(safe-area-inset-top, 0px) + 8px);
  }

  /* 触摸设备使用覆盖式滚动条，不额外挤窄表单；内容仍在窗口内滚动。 */
  .trial-experience-form-shell {
    overflow-y: auto;
    scrollbar-gutter: auto;
    overscroll-behavior: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .trial-experience-form-shell .trial-modal-title {
    margin-bottom: 6px !important;
    padding-right: 0;
    font-size: 23px !important;
    line-height: 1.25;
  }

  .trial-experience-form-shell .trial-modal-title:focus,
  .trial-experience-form-shell .trial-flow-step:focus {
    outline: none;
  }

  .trial-experience-form-shell .trial-modal-desc {
    margin-bottom: 18px !important;
    font-size: 13px !important;
    line-height: 1.65;
  }

  /* 第 3 步压缩字段间距，确保五个字段、提示和操作栏同屏完成 */
  .trial-experience-stage.is-compact .trial-experience-form-shell .trial-modal-desc {
    margin-bottom: 12px !important;
  }

  .trial-experience-stage.is-compact .trial-experience-form-shell .trial-modal-field {
    margin-bottom: 10px !important;
  }

  .trial-experience-stage.is-compact .trial-experience-form-shell .trial-modal-input {
    min-height: 44px;
    padding: 10px 13px !important;
  }

  .trial-experience-stage.is-compact .trial-experience-form-shell .trial-modal-error--global {
    margin-top: 8px;
    padding: 8px 10px;
  }

  .trial-experience-form-shell .trial-input-mode-switch {
    width: 100%;
    margin-bottom: 16px;
  }

  .trial-experience-form-shell .trial-input-mode-switch button {
    min-height: 42px;
    padding: 8px 10px;
    touch-action: manipulation;
  }

  .trial-experience-form-shell .trial-modal-field {
    margin-bottom: 14px !important;
  }

  .trial-experience-form-shell .trial-modal-input {
    min-height: 48px;
    padding: 12px 13px !important;
    font-size: 16px !important;
  }

  .trial-experience-form-shell .trial-modal-textarea {
    min-height: 110px !important;
    resize: none;
  }

  .trial-experience-form-shell .trial-examples {
    margin-bottom: 14px;
  }

  .trial-experience-form-shell .trial-keyword-fields {
    grid-template-columns: 1fr;
    /* 单列时行距即字段距，收一档；桌面那 20px 是为了区分「行」，这里没有行的概念 */
    gap: 16px;
    margin-bottom: 20px;
  }

  .trial-experience-form-shell .trial-examples__heading {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }

  .trial-experience-form-shell .trial-examples__hint {
    margin-top: 0;
    text-align: right;
  }

  .trial-experience-form-shell .trial-examples__list {
    display: flex;
    gap: 8px;
    margin-right: -16px;
    padding-right: 16px;
    padding-bottom: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .trial-experience-form-shell .trial-examples__list::-webkit-scrollbar {
    display: none;
  }

  .trial-experience-form-shell .trial-example-chip {
    flex: 0 0 84%;
    min-height: 58px;
    padding: 9px 11px;
    font-size: 12px;
    scroll-snap-align: start;
    touch-action: manipulation;
  }

  .trial-experience-form-shell .trial-modal-submit,
  .trial-experience-form-shell .trial-modal-actions .trial-modal-submit {
    min-height: 50px;
    height: auto !important;
    margin-top: auto !important;
    touch-action: manipulation;
  }

  .trial-experience-form-shell .trial-modal-actions {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    margin-top: auto !important;
  }

  .trial-experience-form-shell .trial-modal-actions .trial-modal-submit {
    margin-top: 0 !important;
  }

  .trial-experience-stage.is-compact .trial-experience-form-shell .trial-modal-submit,
  .trial-experience-stage.is-compact .trial-experience-form-shell .trial-modal-btn-back {
    min-height: 46px;
  }

  .trial-experience-stage.is-compact .trial-experience-form-shell .trial-modal-actions {
    padding-top: 8px;
  }

  .trial-experience-form-shell .trial-modal-btn-back {
    min-height: 50px;
    padding: 0 12px !important;
    font-size: 13px !important;
    touch-action: manipulation;
  }

  .trial-experience-form-shell .trial-captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
    align-items: stretch;
  }

  .trial-experience-form-shell .trial-captcha-svg {
    width: 100% !important;
    height: 48px !important;
  }

  .trial-experience-form-shell .trial-consent-label {
    gap: 9px;
    font-size: 12px !important;
    line-height: 1.65;
  }

  .trial-experience-form-shell .trial-consent-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  .trial-experience-form-shell .trial-loading {
    flex: 1;
    min-height: 0;
    padding: 6px 0 0 !important;
    gap: 12px;
  }

  .trial-experience-form-shell .trial-loading-note {
    min-height: 40px;
  }

  .trial-experience-form-shell .trial-loading-video {
    width: min(100%, 390px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .trial-experience-form-shell .trial-modal-submit:hover {
    background: var(--experience-blue);
    box-shadow: 0 10px 24px rgba(36, 87, 230, 0.2);
    transform: none;
  }

  .trial-experience-form-shell .trial-example-chip:hover {
    border-color: #e0e7f1;
    background: #f8fafd;
    color: #53617a;
  }

  .trial-experience-form-shell .trial-example-chip:active {
    border-color: rgba(36, 87, 230, 0.32);
    background: #f2f6ff;
    color: var(--experience-blue-dark);
  }

  .trial-experience-footnote {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 14px 2px 0;
    font-size: 11px;
  }

  .trial-experience-footnote a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .trial-experience-body .customer-service-root {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .trial-experience-page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .trial-experience-intro h1 {
    font-size: 26px;
  }

  .trial-experience-stage {
    padding-right: 14px;
    padding-left: 14px;
  }

  .trial-experience-form-shell .trial-examples__list {
    margin-right: -14px;
    padding-right: 14px;
  }

  .trial-experience-form-shell .trial-modal-actions {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .trial-experience-form-shell .trial-captcha-row {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trial-experience-page *,
  .trial-experience-page *::before,
  .trial-experience-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* 连接线的进度轨靠 transform 表达状态，不能被上面的 transition 归零后卡在未完成态 */
  .trial-experience-steps li.is-done:not(:last-child)::after {
    transform: scaleY(1);
  }

  .trial-experience-form-shell .trial-example-chip:hover,
  .trial-experience-form-shell .trial-modal-submit:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .trial-experience-steps li.is-done:not(:last-child)::after {
    transform: scaleX(1);
  }
}