/* ============================================================
   澄图 ChengTu · Landing（首页）
   合同 CT-REDESIGN-2026-001 · PHASE 2 + 视觉精修 + 布局定向修复
   依据：design-reference/01-homepage.png
   视觉语言：Instagram Editorial × Swiss Typography × Apple Interaction

   布局基线（本轮确立，勿再回退）：
   1. 所有区块共用 --ct-home-max-width(1200) + --ct-page-pad 一条内容轨；
      桌面边线 x=左内边距起、right 收在栅格内，Hero 摄影层不得越出。
   2. 工具画廊恒为 4 列单行（<360px 转单行横向滚动），不存在两行布局。
   3. 摄影横幅与对比区是「宽幅扁条」，用 height 直接约束，不用 aspect-ratio 放大。
   4. 桌面 Hero = 左文案 / 右摄影 的两列栅格，两列都在内容轨内。
   ============================================================ */

/* 旧 styles.css 的 body 背景与新设计系统不一致，此处统一 */
body { background: var(--ct-bg); color: var(--ct-text); }

.hp { display: block; background: var(--ct-bg); }

/* ------------------------------------------------------------
   顶部 Header —— 浮在摄影环境层之上
   ------------------------------------------------------------ */
.hp-header {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: calc(var(--ct-space-3) + env(safe-area-inset-top, 0px));
}
.hp-brand {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 27px; font-weight: 800; letter-spacing: .02em;
  /* 设计稿：两个汉字同为深色字形，蓝色只作极小的品牌标记 */
  color: #17181C; line-height: 1;
}
.hp-brand span { color: inherit; }
.hp-brand::after {
  content: ""; position: absolute; left: calc(100% + 3px); top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--ct-bg) 0 26%, var(--ct-accent) 34% 100%);
}
.hp-actions { display: flex; align-items: center; gap: var(--ct-space-2); }
.hp-header .ct-icon-btn { background: rgba(255,255,255,.78); }

/* ------------------------------------------------------------
   Hero —— 四层模型，容器高度只由「视口宽度」驱动
   1) .hp-hero        外部布局容器（唯一的高度控制位）
   2) .hp-hero-media  独立摄影背景层（绝对定位，不参与撑高）
   3) .hp-hero-copy   独立文字内容层（真实 DOM）
   4) .hp-hero-veil / .hp-hero-side  独立装饰层
   禁止：min-height: vh/svh 驱动、flex 自动撑高、图片 intrinsic size 决定容器高
   ------------------------------------------------------------ */
.hp-hero {
  /* overflow 可见：文字组在部分宽度会比 340/430 的地板高，隐藏会把辅助说明整条剪掉。
     摄影层自身有 overflow:hidden 负责裁图，不依赖这里。 */
  position: relative; isolation: isolate; overflow: visible;
  /* 高度只给「地板」，实际由文案组撑开：min-height 仍由视口宽度驱动，
     不会出现过去那种被 svh/vh 拉长的首屏；padding-bottom 保证辅助说明离底边 ≥16px。 */
  min-height: 340px;
  min-height: clamp(340px, 78vw, 430px);
  padding-bottom: 20px;
  display: flex; align-items: flex-start;
}

.hp-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* 摄影裁切：源图 1122×1402 比任何 Hero 横幅都「竖」，cover 永远只裁上下、左右铺满，
   所以 object-position 的百分比在不同宽度下无法同时照顾好咖啡杯（960 档会把杯子整只切掉）。
   改成「按自身比例铺满宽度 + 钉住底边」：杯底到 Hero 底边的距离 = 源图底边到杯底的距离 − bottom 偏移，
   是一条随宽度线性变化的确定关系（源图高/宽 = 1.2496，杯底在源图 78.2% 处 → 距底 21.8% × 1.2496W ≈ 27.3vw）。 */
.hp-hero-media img {
  position: absolute; left: 0; width: 100%; height: auto;
  bottom: calc(12px - 27.24vw);
  /* 窗框 / 天际线 / 咖啡留在右半，左半让给文字 */
  object-fit: cover;
}
.hp-hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(66% 74% at 0% 68%,
      var(--ct-bg) 0%, rgba(250,250,248,.88) 36%, rgba(250,250,248,0) 72%),
    linear-gradient(99deg,
      var(--ct-bg) 0%, rgba(250,250,248,.95) 16%,
      rgba(250,250,248,.8) 32%, rgba(250,250,248,.28) 52%,
      rgba(250,250,248,0) 70%),
    linear-gradient(180deg, rgba(250,250,248,.4) 0%, rgba(250,250,248,0) 14%);
}

/* 内容轨：顶端留出走 Header 净空，正文起点即参考稿签名所在的 y */
.hp-hero-copy {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ct-home-max-width);
  margin: 0 auto; padding-inline: var(--ct-page-pad);
  /* 文字组唯一的垂直控制位：整体下移 ~20px，Hero 高度不变 */
  padding-top: clamp(84px, 21.6vw, 132px);
}

/* 右侧白色手写批注 —— 定位基准始终是 .hp-hero */
.hp-hero-side {
  position: absolute; z-index: 3;
  top: clamp(72px, 17vw, 120px); right: var(--ct-page-pad);
  display: block; max-width: 40%;
  text-align: right;
  font-family: var(--ct-font-hand);
  font-size: clamp(15px, 3.9vw, 24px);
  line-height: 1.06;
  color: #fff;
  transform: rotate(-3.2deg);
  text-shadow:
    0 1px 1px rgba(14, 22, 38, .5),
    0 2px 4px rgba(14, 22, 38, .38),
    0 6px 18px rgba(14, 22, 38, .34);
  pointer-events: none;
}

/* 左上角黑色手写签名 + 收笔飞白（参考稿墨迹 27px / 宽 102px，是点缀不是主标题） */
.hp-hero-script {
  position: relative; display: inline-block; margin-bottom: 1px;
  font-family: var(--ct-font-hand);
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1; color: #17181C;
  transform: rotate(-2.4deg); transform-origin: left bottom;
}
.hp-hero-flourish {
  position: absolute; left: 100%; bottom: 42%;
  width: clamp(30px, 9vw, 58px); height: auto;
  overflow: visible; pointer-events: none;
}
.hp-hero-flourish path {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; opacity: .9;
}

/* 主标题：参考 ≈30px @465（6.5vw）、行距 1.30 */
.hp-hero-title {
  margin: 0; text-wrap: balance;
  font-size: clamp(26px, 6.5vw, 52px);
  line-height: 1.28;
}
.hp-hero-title .hl { color: var(--ct-accent); }
.hp-hero-lead {
  margin-top: clamp(6px, 1.6vw, 12px);
  /* 17em 上限：文字带不再延伸到咖啡杯上方 */
  max-width: 17em;
  font-size: clamp(13px, 2.9vw, 17px); line-height: 1.5; color: var(--ct-text);
}
/* 副标题分两块：说明句与工具行各自成块，窄屏只在约定边界断行，不掉半截词也不压到咖啡杯 */
.hp-hero-say { display: block; max-width: 11.5em; }
.hp-hero-tools { display: block; max-width: 12em; }
.hp-hero-say .hl-t, .hp-hero-tools .hl-t { white-space: nowrap; }
.hp-hero-actions {
  margin-top: clamp(10px, 2.6vw, 20px);
  /* 按钮与辅助说明的稳定距离：13px（要求 12–16），各断点一致 */
  display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
}
/* CTA：内容自适应的短胶囊，不拉满屏宽（参考 162×41 @465） */
.hp-cta { width: auto; max-width: none; min-height: 46px; padding-inline: 18px; font-size: 15.5px; }
.hp-hero-note { font-size: 12.5px; color: var(--ct-text-secondary); }

/* ------------------------------------------------------------
   通用 section —— 按内容重要性建立空间层级，不靠堆 padding
   ------------------------------------------------------------ */
.hp-section,
.hp-studio { margin-top: clamp(22px, 5vw, 44px); }
.hp-sec-head {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: clamp(7px, 1.8vw, 14px);
}
/* 「全部工具」保留 44px 触控盒，但移出流，避免把整行顶高 25px */
.hp-sec-head:has(.hp-sec-more) .ct-section-heading { padding-right: 80px; }
.hp-sec-head .ct-section-heading { font-size: clamp(15px, 3.3vw, 25px); }
.hp-sec-more {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 3px;
  min-height: 44px; padding: 0 4px; border: 0; background: none;
  font-size: 14px; font-weight: 600; color: var(--ct-text-secondary);
  transition: color var(--ct-dur) var(--ct-ease);
}
.hp-sec-more:hover { color: var(--ct-heading); }
.hp-sec-more svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------
   四个工具 —— Editorial Photography Tool Strip
   结构只有两层：分区标题 → 四列摄影图 + 图下一行工具标题。
   刻意不再有外层面板、白色卡底、卡片描边/阴影、悬浮图标、圆形箭头。
   恒为 4 列单行；<320 才降级为带渐隐提示的单行横滚。
   ------------------------------------------------------------ */
.hp-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.8vw, 9px);
}
/* 整张卡就是点击区：照片 + 标题合计远高于 44px 触控下限 */
.hp-tool {
  display: block; min-width: 0;
  /* 显式清零：否则会继承 styles.css 里 .fcell 的 gap:5px 与 padding:16px（旧规则泄漏） */
  gap: 0; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none;
  transition: transform var(--ct-dur) var(--ct-ease);
}
.hp-tool:hover { transform: translateY(-2px); }
.hp-tool:active { transform: scale(.988); }

.hp-tool-media {
  display: block; position: relative; overflow: hidden; min-width: 0;
  aspect-ratio: 4 / 5;
  border-radius: clamp(10px, 2.6vw, 14px);
  background: var(--ct-surface-muted);
}
/* picture 必须撑满照片盒，否则 img 的 height:100% 会退化到 auto，照片盒会被压扁 */
.hp-tool-media picture { display: block; width: 100%; height: 100%; }
.hp-tool-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 520ms var(--ct-ease);
}
.hp-tool:hover .hp-tool-media img { transform: scale(1.05); }

.hp-tool-text {
  display: block; min-width: 0;
  padding: clamp(6px, 1.6vw, 10px) 1px 0;
}
.hp-tool-text b {
  display: block;
  font-size: clamp(11.5px, 2.7vw, 16px); font-weight: 700; letter-spacing: -.012em;
  line-height: 1.2; color: var(--ct-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--ct-dur) var(--ct-ease);
}
.hp-tool:hover .hp-tool-text b { color: var(--ct-accent); }

/* ------------------------------------------------------------
   摄影横幅 —— Wide Editorial Photography Banner
   全视口统一「左文 / 右人 + 横向遮罩」，用 height 直接压扁
   ------------------------------------------------------------ */
.hp-studio-card {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(152px, 42vw, 176px);
  display: flex; align-items: center;
  border-radius: var(--ct-radius-xl); background: var(--ct-surface-ink);
  box-shadow: var(--ct-shadow-floating);
}
.hp-studio-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 40%;
}
.hp-studio-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(44% 58% at 100% 0%, rgba(19,21,26,.5) 0%, rgba(19,21,26,0) 68%),
    linear-gradient(97deg,
      rgba(19,21,26,.94) 0%, rgba(19,21,26,.88) 30%,
      rgba(19,21,26,.52) 52%, rgba(19,21,26,.1) 72%,
      rgba(19,21,26,0) 88%);
}
.hp-studio-body {
  position: relative; z-index: 2;
  max-width: 62%; min-width: 0;
  padding: clamp(13px, 3.4vw, 20px) clamp(13px, 3.4vw, 22px);
}
.hp-studio-title {
  font-size: clamp(16px, 3.9vw, 22px); font-weight: 800;
  letter-spacing: -.02em; color: #fff; line-height: 1.24;
}
.hp-studio-desc {
  margin-top: clamp(5px, 1.3vw, 9px); font-size: clamp(11.5px, 2.8vw, 14px); line-height: 1.45;
  color: rgba(255,255,255,.8);
}
/* 信任说明：第三层信息 —— 一行更小、更轻的文字，不再是三个标签组件 */
.hp-studio-trust {
  margin-top: clamp(7px, 1.9vw, 13px);
  font-size: clamp(10.5px, 2.3vw, 12.5px); font-weight: 500; letter-spacing: .012em;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
/* 手写批注：窄屏缩小并靠上，绝不与面部/中文标题争位 */
.hp-studio-script {
  position: absolute; z-index: 2;
  right: clamp(10px, 3vw, 26px); top: clamp(9px, 2.6vw, 22px);
  display: block; text-align: right;
  font-family: var(--ct-font-hand);
  font-size: clamp(13px, 3.4vw, 19px);
  line-height: 1.08;
  color: rgba(255,255,255,.95);
  transform: rotate(-3deg);
  text-shadow: 0 1px 2px rgba(8,10,14,.62), 0 3px 12px rgba(8,10,14,.45);
  pointer-events: none;
}
@media (max-width: 599px) { .hp-studio-script { display: none; } }

/* ------------------------------------------------------------
   真实效果对比 —— 低高度宽幅条，滑块交互一律不动
   ------------------------------------------------------------ */
.hp .demo-cmp {
  height: clamp(84px, 20vw, 108px);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-surface-muted);
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.hp .demo-cmp:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 3px; }
.hp .demo-cmp .ct-ba__handle { pointer-events: none; }
.hp .demo-div { border-left: 2px solid rgba(255,255,255,.86); }
.hp .demo-save {
  left: 50%; top: 8px; transform: translateX(-50%);
  background: rgba(23,24,28,.78); backdrop-filter: blur(6px);
}
.hp-demo-note {
  margin-top: var(--ct-space-3);
  font-size: 12.5px; color: var(--ct-text-tertiary);
}

/* ------------------------------------------------------------
   底部
   ------------------------------------------------------------ */
.hp-foot {
  margin-top: clamp(40px, 9vw, 60px); text-align: center;
  padding-block: var(--ct-space-6) calc(var(--ct-space-8) + env(safe-area-inset-bottom, 0px));
}
.hp-foot-brand {
  position: relative; display: inline-block;
  font-size: 21px; font-weight: 800; letter-spacing: .02em;
  color: #17181C; line-height: 1;
}
.hp-foot-brand span { color: inherit; }
.hp-foot-brand::after {
  content: ""; position: absolute; left: calc(100% + 3px); top: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--ct-bg) 0 26%, var(--ct-accent) 34% 100%);
}
.hp-foot-note {
  margin-top: var(--ct-space-3); font-size: 13px;
  color: var(--ct-text-secondary); line-height: 1.6;
}

/* ------------------------------------------------------------
   Header 菜单（右上弹出）
   ------------------------------------------------------------ */
.hp-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 22, 34, .26);
  animation: ct-fade-in var(--ct-dur) var(--ct-ease);
}
@keyframes ct-fade-in { from { opacity: 0; } }
.hp-menu-card {
  position: absolute;
  top: calc(var(--ct-space-12) + env(safe-area-inset-top, 0px));
  right: max(var(--ct-page-pad), calc((100vw - var(--ct-home-max-width)) / 2 + var(--ct-page-pad)));
  width: min(240px, calc(100vw - var(--ct-page-pad) * 2));
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--ct-surface); border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-floating);
  animation: ct-pop var(--ct-dur-slow) var(--ct-ease);
  transform-origin: top right;
}
.hp-menu-item {
  display: flex; align-items: center; gap: var(--ct-space-3);
  min-height: 46px; padding: 0 var(--ct-space-3);
  border: 0; background: none; border-radius: var(--ct-radius-sm);
  font-size: 15px; font-weight: 600; color: var(--ct-ink); text-align: left;
  transition: background var(--ct-dur) var(--ct-ease);
}
.hp-menu-item:hover { background: var(--ct-surface-soft); }
.hp-menu-item svg { width: 18px; height: 18px; flex: none; color: var(--ct-text-secondary); }

/* ------------------------------------------------------------
   工具搜索面板
   ------------------------------------------------------------ */
.hp-search {
  position: fixed; inset: 0; z-index: 110;
  display: flex; justify-content: center;
  padding: clamp(56px, 11vh, 132px) var(--ct-page-pad) var(--ct-page-pad);
  background: rgba(17, 22, 34, .44);
  backdrop-filter: blur(4px);
  animation: ct-fade-in var(--ct-dur) var(--ct-ease);
}
.hp-search-card {
  width: 100%; max-width: 560px; max-height: 72vh;
  display: flex; flex-direction: column; gap: var(--ct-space-3);
  padding: var(--ct-space-4);
  background: var(--ct-surface); border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-floating);
  animation: ct-pop var(--ct-dur-slow) var(--ct-ease);
}
.hp-search-bar {
  display: flex; align-items: center; gap: var(--ct-space-3);
  padding: 0 6px 0 var(--ct-space-4);
  background: var(--ct-surface-soft);
  border: 1px solid var(--ct-border); border-radius: var(--ct-radius-pill);
}
.hp-search-ico { width: 19px; height: 19px; flex: none; color: var(--ct-text-tertiary); }
.hp-search-bar input {
  flex: 1; min-width: 0; height: 46px;
  border: 0; background: none; outline: none;
  font-size: 16px; color: var(--ct-ink);
}
.hp-search-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hp-search-list {
  overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 2px;
}
.hp-search-item {
  display: flex; align-items: center; gap: var(--ct-space-3);
  width: 100%; padding: 12px; border: 0; background: none;
  border-radius: var(--ct-radius-sm); text-align: left;
  font-size: 15px; font-weight: 600; color: var(--ct-ink);
  transition: background var(--ct-dur) var(--ct-ease);
}
.hp-search-item:hover { background: var(--ct-surface-soft); }
.hp-search-item svg { width: 19px; height: 19px; flex: none; color: var(--ct-accent); }
.hp-search-item .sub {
  margin-left: auto; font-size: 12.5px; font-weight: 500;
  color: var(--ct-text-tertiary);
}
.hp-search-empty {
  padding: var(--ct-space-8) var(--ct-space-4);
  text-align: center; font-size: 14px; color: var(--ct-text-tertiary);
}

/* ============================================================
   响应式 —— 全部以真实 CSS 视口宽度为准
   ============================================================ */

/* ≤599：收紧文字组内部节奏，让「签名+主标题+副标题+CTA+辅助说明」在照片盒内落完。
   只收内部间距与行高，不动 padding-top（那会把简报要求的整体下移退回去），也不增大 Hero 高度。 */
@media (max-width: 599px) {
  .hp-hero-script { font-size: clamp(26px, 5.8vw, 30px); }
  .hp-hero-title { line-height: 1.24; }
  .hp-hero-lead { margin-top: 5px; line-height: 1.44; }
  .hp-hero-actions { margin-top: 9px; }
  /* 手机幅面：源图左右铺满、无法横向取窗，所以「咖啡杯略向右」用 6% 轻微放大实现，
     视觉重心钉在底边（transform-origin: … 100%）→ 杯底与 Hero 底边的距离基本不变，
     杯心右移约 2%（393 档 ≈ +8px），文字带不受影响。 */
  .hp-hero-media img {
    transform: scale(1.06); transform-origin: 30% 100%;
  }
}

/* 430 及以下：长句式分区标题必须与「全部工具」同处一行，不能掉出孤字 */
@media (max-width: 430px) {
  .hp-sec-head { gap: var(--ct-space-2); }
  .hp-sec-head .ct-section-heading { font-size: clamp(15px, 4.1vw, 17.5px); letter-spacing: -.01em; min-width: 0; }
  .hp-sec-head .ct-caption { flex: none; white-space: nowrap; font-size: 12px; }
  .hp-sec-more { font-size: 13px; }
}

/* 390 及以下：副标题工具行保持两短行，整行文字带停在咖啡杯左侧 */
@media (max-width: 390px) {
  .hp-hero-tools { max-width: 11.2em; }
}

/* 极窄屏兜底：四列放不下时单行横向滚动，并给出明确的可滑动提示（不静默裁切） */
@media (max-width: 319px) {
  .hp-tool-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78px, 1fr);
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), rgba(0,0,0,.35) 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), rgba(0,0,0,.35) 100%);
  }
  .hp-tool-grid::-webkit-scrollbar { display: none; }
  .hp-tool { scroll-snap-align: start; }
}

/* 600+：单卡变宽，标题字号上调一档；Hero 尺寸仍由基准 vw 表达式统一控制 */
@media (min-width: 600px) {
  .hp-tool-text b { font-size: 13.5px; }
  .hp-tool-text { padding-top: 8px; }
  .hp-studio-media { object-position: 72% 42%; }
  .hp-hero-tools, .hp-hero-say { max-width: none; }
}

/* 760+：照片间距放宽，Hero 摄影主体左移让出批注区 */
@media (min-width: 760px) {
  .hp-tool-grid { gap: clamp(8px, 1.4vw, 14px); }
  .hp-tool-text b { font-size: 14.5px; }
}

/* 平板幅面（600–1023）不再需要单独的摄影取窗规则：底边锚定模型下，
   杯底到 Hero 底边的距离与宽度无关（见 .hp-hero-media img 的注释），
   这正是换掉 object-position 百分比的原因。 */

/* 900+：桌面四列大图摄影画廊，照片尺寸随容器放大 */
@media (min-width: 900px) {
  .hp-tool-text { padding-top: 10px; }
  .hp-tool-text b { font-size: 16px; }
}

/* ------------------------------------------------------------
   1024+ —— 桌面 Hero：左文案 / 右摄影，两列全部收进内容轨
   摄影层不再贴浏览器右缘，而是与工具画廊共用 right 边线
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  .hp-hero {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: center;
    column-gap: clamp(28px, 3.6vw, 56px);
    height: clamp(548px, 62svh, 660px);
    /* 摄影层不再出血：整段 Hero 落在统一栅格内 */
    max-width: var(--ct-home-max-width);
    margin-inline: auto;
    padding-inline: var(--ct-page-pad);
    overflow: visible;
  }
  @supports not (height: 62svh) { .hp-hero { height: clamp(548px, 62vh, 660px); } }
  .hp-hero-media {
    position: relative; inset: auto;
    grid-column: 2; grid-row: 1;
    height: 100%; min-width: 0;
    border-radius: var(--ct-radius-xl);
    overflow: hidden;
  }
  .hp-hero-media img {
    /* 桌面照片是独立圆角盒，回到「填满盒子 + 百分比取窗」，需要清掉底边锚定 */
    position: static; bottom: auto;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 42% 32%;
  }
  /* 照片已有明确边界，不再需要遮罩 */
  .hp-hero-veil { display: none; }
  .hp-hero-copy {
    grid-column: 1; grid-row: 1;
    max-width: none; margin: 0; padding-inline: 0;
    padding-top: clamp(56px, 7svh, 88px);
  }
  .hp-hero-title { font-size: clamp(40px, 3.5vw, 54px); }
  .hp-hero-lead { font-size: 17px; max-width: 26em; }
  .hp-hero-side {
    top: clamp(104px, 17svh, 168px);
    /* 再让出圆角内边距：旋转后的外接框会比布局框宽几 px，不能压到照片圆角 */
    right: calc(var(--ct-page-pad) + clamp(18px, 2vw, 34px));
    max-width: 30%;
    font-size: clamp(20px, 2vw, 27px);
  }
  .hp-studio-card { height: clamp(262px, 20.5vw, 288px); }
  .hp-studio-media { object-position: 68% 44%; }
  .hp-studio-body { max-width: 46%; padding: clamp(24px, 3vw, 34px) clamp(26px, 3vw, 36px); }
  .hp-studio-title { font-size: clamp(24px, 2vw, 29px); }
  .hp-studio-desc { font-size: 14px; margin-top: 8px; }
  .hp-studio-trust { margin-top: 16px; font-size: 13px; }
  .hp-studio-script { font-size: clamp(20px, 1.9vw, 26px); right: clamp(20px, 2.2vw, 30px); top: clamp(16px, 2vw, 26px); }
  .hp .demo-cmp { height: clamp(240px, 19vw, 282px); }
}

@media (min-width: 1600px) {
  /* 超宽屏：栅格不再变宽，只让照片更高一点以维持竖向构图 */
  .hp-hero { height: clamp(620px, 66svh, 680px); }
}