/* ==================== ERA Standard design system ====================
   2026-09-18: moved off the warm cream/Fraunces-serif look toward a
   cleaner, Apple-style system — one neutral sans-serif type family
   (the OS's own UI font, same technique apple.com itself uses, via
   -apple-system/BlinkMacSystemFont), a near-white/neutral-gray base
   instead of cream, and the brand amber/terracotta kept ONLY as a
   sparing accent (buttons, highlights) rather than the ambient tone —
   same idea as how Apple uses blue sparingly against white/gray.
   Backup of the previous version: git tag pre-apple-redesign-2026-09-18. */
:root{
  --bg: #FBFBFD;
  --bg2: #F5F5F7;
  --card: #FFFFFF;
  --line: #D2D2D7;
  --text: #1D1D1F;
  --text-dim: #6E6E73;
  --accent: #D98E1C;      /* amber — brand accent, used sparingly now */
  --accent2: #142B4E;     /* ERA深蓝(deep navy) — 2026-09-30从guest-gallery/mock_assets/era_moment_logo.png真实logo背景采样得到，Michelle定的合并版主色，之前是锉红/terracotta */
  --accent2-hover: #112441;
  --accent-hover: #c17f18;
  --teal: #2F7A6E;        /* used sparingly to nod at ERA MOMENT */
  /* 2026-10：导航栏"当前页"字体颜色之前直接用了--accent2(深藏青)，取mock图(25740)实际样本
     发现"Home"的蓝是明显更亮的一种蓝(约#3D439D)，跟--accent2(#142B4E)放在小字号的导航栏
     文字上几乎看不出区别于黑色——Joey反馈"也没有蓝色字体啊"正是这个原因：技术上是蓝的，
     但深色在小字上肉眼基本分辨不出。这个亮蓝复用首页"Worth sharing."渐变起始色#3B74C4，
     不用mock图取样的#3D439D，是为了跟站内已经在用的那抹蓝保持同一个值，不再多造一个新蓝。 */
  --link-blue: #3B74C4;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --radius: 12px;
  --maxw: 1120px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 12px 28px -18px rgba(0,0,0,.16);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin:0 0 .5em;
  color:var(--text);
  text-wrap:balance;
}
/* 大字号(h1/h2)用更紧的负字距，是苹果官网标志性的处理——字号越大越紧；
   但同一套字距套到卡片标题这种15-17px的小标题上会显得局促，所以h3/h4
   单独放松回来，这也是"字体有点干巴"这条反馈里我理解的一部分原因：
   所有标题不分大小统一处理，缺少字号越大越有戏剧性这种对比。 */
h1,h2{ font-weight:700; letter-spacing:-0.03em; }
h3,h4{ font-weight:600; letter-spacing:-0.008em; }
p{margin:0 0 1em; color:var(--text-dim); line-height:1.6;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{padding:88px 0;}
/* 2026-10-02发现的问题：几乎全站的<section>都同时带class="wrap"，而.wrap自己的padding(0 28px，
   一个class选择器)比上面`section{padding:88px 0}`(一个元素选择器)优先级更高——CSS优先级只看
   选择器种类，不管哪条规则写在后面。结果是：每一个<section class="wrap">的垂直间距实际上从来
   没生效过，只剩.wrap那行"0 28px"里的0，一直是贴着的，只是各个板块内部标题的margin-bottom之类
   的次要间距撑住了一点，看着还没到"完全没有间距"那么夸张，但明显不够。这条规则用更高优先级的
   `section.wrap`重新把垂直间距定回来；下面两条分别处理.section-tight组合、和手机端断点，两种
   都要跟着同一个优先级逻辑调整，不然又会被.wrap盖掉。 */
/* 2026-10-02：88px(根因修复前的原值) -> 56px(Joey说还是大) -> 现在40px/手机28px。 */
section.wrap{ padding-top:40px; padding-bottom:40px; }
section.wrap.section-tight{ padding-top:0; padding-bottom:40px; }
@media (max-width:720px){
  section{padding:28px 0;}
  section.wrap{ padding-top:28px; padding-bottom:28px; }
  section.wrap.section-tight{ padding-top:0; padding-bottom:28px; }
}

.eyebrow-none{} /* deliberately not using tracked-out caps eyebrows per design brief */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-size:14.5px; font-weight:600;
  font-family:var(--font-sans);
  cursor:pointer; border:none;
  transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--accent2); color:#FFF6E9; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 20px -8px rgba(20,43,78,0.55); }
.btn-primary:hover{ background:var(--accent2-hover); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 26px -8px rgba(20,43,78,0.6); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--accent2); color:var(--accent2); transform:translateY(-1px); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13.5px; letter-spacing:.01em; }

/* ---------- header ---------- */
#site-header{
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--line);
}
/* 毛玻璃效果放在伪元素上，不能直接写在#site-header上：backdrop-filter会让它成为里面position:fixed
   元素(手机菜单抽屉)的"包含块"，抽屉就只有页头那么高、背景不显示，文字压在页面内容上。 */
#site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(251,251,253,0.8);
  backdrop-filter:blur(20px);
}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  /* gap是"最少留这么多"：links内容少的时候space-between本来就会留出更大间距，
     内容一多(9项导航那阵子)两侧间距会被挤到接近0——gap保证登录/注册/Create an Event
     这一组不会紧贴着导航链接，2026-10-01 Joey反馈"导航看着挤、按钮再往右放一点" */
}
.nav-brand{ font-family:var(--font-sans); font-weight:700; font-size:19px; display:flex; align-items:center; }
.nav-brand span{ color:var(--accent2); }
/* 2026-10网站修改10：导航栏文字logo换成真实logo图(Joey上传的"ERA logo 2026 white.png"，
   裁掉了下面的"Global Event Content"小字和空白边，只留ERA Moment字标+小圆球图标)。 */
.nav-logo{ height:30px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:14px; }
.nav-links > a, .nav-links > .nav-item{ white-space:nowrap; }  /* "Case Studies"这种两个词的项不要在桌面端断成两行 */
.nav-links a:hover{ color:var(--accent2); }
/* 2026-10：当前页在导航栏只变蓝字，不带下划线——Joey明确要求去掉之前加的那条
   box-shadow下划线("那多丑啊")，单纯文字变色就行。颜色用--link-blue(见:root里的注释)，
   不是--accent2，深藏青在14px小字上肉眼基本看不出是蓝色的。 */
.nav-links > a.nav-active, .nav-drop-trigger.nav-active{ color:var(--link-blue); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-right .btn{ white-space:nowrap; }  /* "Create an Event"这种两个词的按钮，空间紧时不要断成两行 */
.nav-right > .btn{ flex-shrink:0; }     /* 导航项多、空间紧的时候，宁可整段文字缩短显示也不要把按钮压扁换行 */
/* #navAuthSlot是个裸<span>(renderAuthNav()往里塞Log In/Register两个按钮，或登录后的My Account一个链接)，
   没有这条规则的话span默认inline、两个按钮就是普通行内流——空间一紧(比如桌面端导航项多的时候)就会
   像两段文字一样各占一行，看着像叠在一起。改成flex行、不换行，两个按钮并排。 */
#navAuthSlot{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-toggle{ display:none; background:none; border:none; font-size:22px; cursor:pointer; }

/* ---------- nav dropdowns (Solutions/Case Studies/Pricing/Insights) ---------- */
.nav-item{ position:relative; }
.nav-drop-trigger{
  font:inherit; background:none; border:none; cursor:pointer; padding:0; color:inherit;
  display:flex; align-items:center; gap:4px;
}
.nav-drop-trigger:hover{ color:var(--accent2); }
.nav-drop-trigger .caret{ font-size:10px; transition:transform .15s ease; }
.nav-drop-trigger.open .caret{ transform:rotate(180deg); }
.nav-drop-menu{
  display:none; position:absolute; top:calc(100% + 14px); left:0; z-index:30;
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-card); padding:8px; min-width:240px;
}
.nav-drop-trigger.open + .nav-drop-menu{ display:block; }
.nav-drop-item{ display:block; padding:9px 12px; border-radius:8px; font-size:14px; white-space:nowrap; }
.nav-drop-item:hover{ background:var(--bg2); color:var(--accent2); }
@media (max-width:1140px){
  /* 2026-10-01：断点从900px改到1140px——7个导航项(含4个下拉)+Log In/Register/Create an Event
     三个按钮，实测1080px宽左右就已经放不下、会把Create an Event这个按钮挤出屏幕外(页面出现横向
     滚动条，比文字换行更糟)，所以在"桌面版导航能放下"和"换成手机抽屉"之间，把分界线往上提到
     1140px，留出安全余量。 */
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--bg);
    flex-direction:column; align-items:flex-start; padding:24px 28px; gap:18px;
    font-size:17px; display:none; overflow-y:auto;
  }
  .nav-links > a, .nav-links > .nav-item{ white-space:normal; }  /* 抽屉够宽，两个词的项照常换行没关系 */
  /* 关闭时用display:none，而不是把它挪到屏幕右侧外面：挪到外面的fixed元素会让手机浏览器把
     布局视口撑到两倍宽、整页被缩小显示(每个页面都会中招)。打开时用动画滑入。 */
  .nav-links.open{ display:flex; animation:navSlideIn .25s ease; }
  @keyframes navSlideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
  .nav-toggle{ display:block; }
  .nav-right .btn{ display:none; }
  /* 手机上没有hover，下拉菜单也不能用绝对定位悬浮(屏幕太窄放不下)：改成点击后在原地展开成缩进的列表，
     跟抽屉里其他链接一样能上下滚动，再点一次或点别的项收起。 */
  .nav-item{ width:100%; }
  .nav-drop-trigger{ font-size:17px; width:100%; justify-content:space-between; }
  .nav-drop-menu{
    position:static; display:none; box-shadow:none; border:none; background:none;
    padding:6px 0 0 14px; margin-top:8px; min-width:0;
  }
  .nav-drop-trigger.open + .nav-drop-menu{ display:block; }
  .nav-drop-item{ padding:10px 0; font-size:15.5px; color:var(--text-dim); }
}

/* ---------- footer ---------- */
#site-footer{ border-top:1px solid var(--line); margin-top:60px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  padding:56px 0 28px;
}
.footer-grid h4{ font-size:13px; margin-bottom:14px; }
.footer-grid a{ display:block; font-size:14px; color:var(--text-dim); margin-bottom:9px; }
.footer-grid a:hover{ color:var(--accent2); }
.footer-bottom{
  border-top:1px solid var(--line); padding:18px 0;
  display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-dim);
}
@media (max-width:720px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ flex-direction:column; gap:8px; }
}

/* ---------- hero ---------- */
.hero{
  padding:76px 0 64px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.hero h1{ font-size:clamp(32px,4.4vw,54px); max-width:620px; }
.hero .sub{ font-size:17.5px; max-width:480px; margin-top:18px; }
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-visual{
  aspect-ratio:4/3.1; border-radius:16px; overflow:hidden;
  background:linear-gradient(155deg,#E9CE9F,#D98E1C 65%,#B6432E);
  position:relative;
}
.hero-visual .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } }

/* ---------- generic section headers ---------- */
.sec-head{ max-width:640px; margin-bottom:44px; }
.sec-head h2{ font-size:clamp(26px,3vw,36px); }
.sec-head p{ font-size:16px; }
/* 2026-10：首页mock图(修改1 #15/修改3)每个板块标题上面都有一行小字的eyebrow标签——
   跟73行那条旧注释"故意不用eyebrow"的决定冲突，但Joey现在明确要求"100%照着图做"，
   这条新指令优先。 */
.eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent2); margin-bottom:8px; }
.sec-head .eyebrow{ display:block; }

/* ---------- what you get ---------- */
.get-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.get-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-card);
  transition:transform .18s ease, box-shadow .18s ease;
}
.get-card:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 20px 36px -20px rgba(0,0,0,.22); }
.get-card .num{ font-family:var(--font-sans); font-weight:700; font-size:22px; color:var(--accent2); }
.get-card h3{ font-size:17px; margin-top:10px; }
.get-card p{ font-size:14.5px; margin:0; }
@media (max-width:820px){ .get-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .get-grid{ grid-template-columns:1fr; } }

/* ---------- how it works ---------- */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:stepnum; }
.step3{ position:relative; padding-left:52px; }
.step3::before{
  counter-increment:stepnum; content:counter(stepnum);
  position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#FFF6E9;
  font-family:var(--font-sans); font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.step3 h3{ font-size:16.5px; }
.step3 p{ font-size:14.5px; }
@media (max-width:820px){ .steps3{ grid-template-columns:1fr; } }

/* ---------- before / after ---------- */
.ba-slider{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9;
  background:#D9C6A3; border:1px solid var(--line);
}
.ba-slider .side{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-weight:700; font-size:15px;}
/* 2026-10网站修改8：真实前后对比照片铺满.side；加载失败时(ba-missing)隐藏图片，
   露出渐变占位背景+ba-fallback-label文字，跟.media-slot的media-missing是同一个约定。 */
.ba-slider .side img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-fallback-label{ display:none; }
.ba-before{ background:linear-gradient(135deg,#C9BBA4,#A99878); color:#3B3122; }
.ba-after{ background:linear-gradient(135deg,#F3D9A6,#E0562B); color:#FFF6E9; clip-path:inset(0 0 0 50%); }
.ba-slider .side.ba-missing img{ display:none; }
.ba-slider .side.ba-missing .ba-fallback-label{ display:block; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; background:#FFF6E9;
  cursor:ew-resize; box-shadow:0 0 0 1px rgba(0,0,0,.1);
}
.ba-handle::after{
  content:'⟷'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; background:#FFF6E9; color:var(--accent2);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.ba-tag{ position:absolute; top:14px; font-size:12px; padding:5px 11px; border-radius:999px; background:rgba(0,0,0,.35); color:#fff; }
.ba-tag.left{ left:14px; } .ba-tag.right{ right:14px; }
.ba-caption{ font-size:13.5px; color:var(--text-dim); margin-top:12px; text-align:center; }

/* ---------- Standard展示4卡片一排(首页"Captured on your phone") ---------- */
.std-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.std-grid .media-slot{ border-radius:12px; }
.std-card{ padding:16px; }
.std-card h3{ font-size:14.5px; margin:0 0 4px; }
.std-card p{ font-size:12.5px; margin:0; color:var(--text-dim); }
.std-tag{ position:absolute; left:10px; bottom:10px; font-size:11px; padding:4px 9px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; }
@media (max-width:820px){ .std-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .std-grid{ grid-template-columns:1fr; } }

/* ---------- use cases ---------- */
.uc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.uc-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; box-shadow:var(--shadow-card);
  transition:border-color .15s ease, transform .15s ease, box-shadow .18s ease;
}
.uc-card:hover{ border-color:var(--accent2); transform:translateY(-3px); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 20px 36px -20px rgba(0,0,0,.22); }
.uc-card .icon{ font-size:22px; }
.uc-card h3{ font-size:15.5px; margin:10px 0 6px; }
.uc-card p{ font-size:13px; margin:0; }
@media (max-width:920px){ .uc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .uc-grid{ grid-template-columns:1fr; } }
/* 2026-10-13(batch 4)：列数修饰类，替代页面里的内联grid-template-columns——内联style比上面的
   @media优先级高，手机上也锁死3列挤出屏幕。修饰类只在桌面宽度生效，断点照常降成2列/1列
   (跟下面.flow-steps-5同一个做法)。 */
@media (min-width:921px){ .uc-grid.cols-3, .flow-steps.cols-3{ grid-template-columns:repeat(3,1fr); } .uc-grid.cols-2{ grid-template-columns:1fr 1fr; } }
/* 没有组件class的两列布局(左文右图之类)：平板以下单列 */
.split-2{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .split-2{ grid-template-columns:1fr; } }
.uc-card .thumb{ aspect-ratio:16/10; border-radius:8px; margin-bottom:12px; }
.uc-card .explore{ display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--accent2); }

/* ---------- Enterprise内容网格(首页"Content for every part of your event")：
   不对称editorial布局，见index.html里的注释。 ---------- */
/* ---------- solutions/enterprise.html "Content for every part"：2x2，每格图左文右 ---------- */
.content-row-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; }
.content-row{ display:flex; gap:16px; align-items:flex-start; }
.content-row .media-slot{ flex:0 0 42%; border-radius:10px; }
.content-row h3{ font-size:15.5px; margin:0 0 6px; }
.content-row p{ font-size:13px; color:var(--text-dim); margin:0; }
.content-row .explore{ display:inline-block; margin-top:8px; font-size:13px; font-weight:600; color:var(--accent2); }
@media (max-width:720px){ .content-row-grid{ grid-template-columns:1fr; } }
@media (max-width:420px){ .content-row{ flex-direction:column; } .content-row .media-slot{ width:100%; } }
/* 2026-10网站修改9：首页"Content for every part of your event"专用——按比例分组摆成两列
   (前3个一列、后3个一列)，而不是按文档顺序两两交替。只用在首页这一处，不影响共用
   .content-row-grid的其它页面。 */
.content-row-grid.grouped-by-ratio{ grid-auto-flow:column; grid-template-rows:repeat(3,auto); }
@media (max-width:720px){ .content-row-grid.grouped-by-ratio{ grid-auto-flow:row; grid-template-rows:none; } }

.reach-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
.reach-list{ display:flex; flex-direction:column; gap:24px; }
.reach-item{ display:flex; align-items:center; gap:14px; font-size:14px; }
.reach-item .icon{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:17px; }
.reach-item b{ font-size:14.5px; }
@media (max-width:720px){ .reach-grid{ grid-template-columns:1fr; } }

.ent-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; gap:16px; }
.ent-card{ display:block; text-decoration:none; color:inherit; }
.ent-card .media-slot{ margin-bottom:12px; border-radius:12px; }
.ent-card h3{ font-size:15.5px; margin:0 0 6px; }
.ent-card p{ font-size:13px; margin:0; color:var(--text-dim); }
.ent-card .explore{ display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--accent2); }
.ent-card.ent-text-only{ display:flex; flex-direction:column; justify-content:center; }
.ent-grid > .media-slot{ border-radius:12px; }
@media (max-width:920px){
  .ent-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .ent-grid > .media-slot{ grid-column:2 !important; grid-row:1 / 3 !important; }
}
@media (max-width:640px){
  .ent-grid{ grid-template-columns:1fr; }
  .ent-grid > *{ grid-column:1 !important; grid-row:auto !important; }
}

/* ---------- 2026-10 第二轮/第三轮网站修改：可替换媒体占位框 ----------
   所有真实图片/视频都还没给，但前端不能写死——约定一个固定路径
   (../assets/media/<page>/<slot>.jpg|mp4)，图/视频没有真实文件的时候用
   onerror/onloadedmetadata切到.media-missing显示文字标签占位；真实素材
   做好了，按文档里写的路径直接放文件进去就行，不用改任何HTML/CSS。 */
.media-slot{ position:relative; background:var(--bg2); border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.media-slot img, .media-slot video{ width:100%; height:100%; object-fit:cover; display:block; }
.media-slot .media-slot-label{ position:absolute; inset:0; display:none; flex-direction:column; gap:3px; align-items:center; justify-content:center; text-align:center; padding:16px; font-size:12.5px; line-height:1.5; color:var(--text-dim); background:var(--bg2); }
.media-slot.media-missing img, .media-slot.media-missing video{ display:none; }
.media-slot.media-missing .media-slot-label{ display:flex; }
.media-slot.media-missing{ outline:1px dashed var(--line); outline-offset:-1px; }
.media-slot.video::after{ content:"▶"; position:absolute; width:52px; height:52px; border-radius:50%; background:rgba(20,43,78,.82); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; pointer-events:none; }
.media-slot.video.media-missing::after{ display:none; }
/* 2026-10：占位素材的"唯一编号+尺寸比例"标注(先用在首页，效果确认后再推广到全站)——
   编号(.slot-id)用来对应~/placeholder-catalog.csv里的素材需求清单，比例(.slot-dim)
   标的是这个位置的宽高比(CSS aspect-ratio的实际值，不是瞎编的像素尺寸)。 */
.slot-id{ display:block; font-weight:700; font-size:1.05em; letter-spacing:.02em; color:var(--text); }
.slot-dim{ display:block; font-weight:500; font-size:.82em; color:var(--text-dim); }

/* ---------- 流程步骤(Plan→Capture→Process→Deliver这种4步条) ---------- */
.flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.flow-step{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.flow-step .n{ font-size:13px; font-weight:700; color:var(--accent2); }
.flow-step h3{ font-size:15.5px; margin:8px 0 6px; }
.flow-step p{ font-size:13px; margin:0; color:var(--text-dim); }
@media (max-width:920px){ .flow-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .flow-steps{ grid-template-columns:1fr; } }
/* 2026-10-06：event-recap-videos.html把"Need real-time uploads?"并进流程卡片变成5个，
   用这个修饰类而不是内联style——内联style的优先级比上面两条@media规则还高，会导致手机宽度
   也锁死5列挤在一起，用一个只在920px以上生效的类就不会覆盖掉已有的响应式断点。 */
@media (min-width:921px){ .flow-steps-5{ grid-template-columns:repeat(5,1fr); } }

/* ---------- testimonials / stories ---------- */
.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.story-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-card); }
.story-card.plain{ background:none; border:none; box-shadow:none; padding:0; }
.story-meta{ display:flex; gap:12px; font-size:12.5px; color:var(--text-dim); margin-top:14px; }
.story-meta div{ border-left:1px solid var(--line); padding-left:10px; }
.story-meta div:first-child{ border-left:none; padding-left:0; }
.quote{ font-family:var(--font-sans); font-weight:700; font-size:16.5px; font-style:italic; }
@media (max-width:820px){ .story-grid{ grid-template-columns:1fr; } }
@media (min-width:821px){ .story-grid.cols-2{ grid-template-columns:repeat(2,1fr); } }

/* ---------- case studies(图文交替两栏行) ---------- */
.case-rows{ display:flex; flex-direction:column; gap:56px; }

/* ---------- 小活动case study：2列，每行图+文字并排(不是3列卡片网格) ---------- */
.case-mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px 40px; }
.case-mini{ display:flex; gap:16px; align-items:flex-start; }
.case-mini .media-slot, .case-mini .uc-carousel{ flex:0 0 220px; width:220px; aspect-ratio:4/3; border-radius:10px; margin:0; }
.case-mini h3{ font-size:15px; margin:0 0 2px; }
.case-mini .dim{ font-size:12px; color:var(--text-dim); margin:0 0 6px; }
.case-mini p{ font-size:13px; margin:0; }
@media (max-width:720px){ .case-mini-grid{ grid-template-columns:1fr; } }
@media (max-width:420px){ .case-mini{ flex-direction:column; } .case-mini .media-slot, .case-mini .uc-carousel{ width:100%; } }
.case-row{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.case-row.reverse .case-media{ order:2; }
.case-row.reverse .case-copy{ order:1; }
.case-media .uc-carousel{ aspect-ratio:4/3; margin:0; }
.case-copy h2{ font-size:clamp(20px,2.4vw,26px); margin:0 0 10px; }
.case-copy p{ font-size:15px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }

/* ---------- 纯文字两栏列表(About页"Experience at...") ---------- */
.event-list-grid{ display:grid; grid-template-columns:1fr 1fr; }
.event-list-grid div{ padding:12px 16px; border-top:1px solid var(--line); font-size:14px; }
.event-list-grid div:nth-child(1), .event-list-grid div:nth-child(2){ border-top:none; }
@media (max-width:560px){ .event-list-grid{ grid-template-columns:1fr; } .event-list-grid div:nth-child(2){ border-top:1px solid var(--line); } }
.tag{ font-size:12px; padding:4px 10px; border-radius:999px; background:var(--bg2); color:var(--text-dim); }
.case-copy .takeaway{ font-weight:700; font-size:15px; margin-top:14px; }
@media (max-width:820px){
  .case-row, .case-row.reverse{ grid-template-columns:1fr; }
  .case-row.reverse .case-media, .case-row.reverse .case-copy{ order:initial; }
}

.tm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tm-grid-loose{ gap:32px; }  /* 2026-10-01：首页反馈"排版不要贴的这么紧"，卡片间距加大 */
.tm-grid-loose .tm-card{ padding:30px; }
.tm-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-card); }
.tm-card.plain{ background:var(--bg2); border:1px solid var(--line); box-shadow:none; padding:28px 32px; text-align:left; }
.tm-card.plain .quote-mark{ font-size:36px; line-height:1; color:var(--accent); font-weight:700; margin-bottom:4px; }
.tm-card.plain .quote{ font-size:17px; }
.tm-card.plain .tm-name{ font-weight:700; font-size:13.5px; }
.tm-card.plain .tm-role{ font-size:12.5px; color:var(--text-dim); }
.tm-who{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.tm-avatar{ width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-weight:600; }
.tm-name{ font-size:13.5px; font-weight:600; }
.tm-role{ font-size:12px; color:var(--text-dim); }
@media (max-width:820px){ .tm-grid{ grid-template-columns:1fr; } }

/* ---------- pricing ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:680px; margin:0 auto; }
/* 2026-10-01：Free Gallery、Member Pro隐藏(不是删)，只剩2张卡片可见，所以grid只留2列宽度；
   .retired-tier是display:none，不占grid的格子，所以列数按"看得见的卡片数"算，不是"总共几张卡片"。
   以后哪张卡片要恢复显示(去掉retired-tier)，记得把这里的列数、max-width也改回4档时的样子。 */
.retired-tier{ display:none; }
.price-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 22px; position:relative; box-shadow:var(--shadow-card); }
.price-card.featured{ border-color:var(--accent2); box-shadow:0 12px 32px rgba(20,43,78,0.12); }
.price-card .badge{ position:absolute; top:-12px; left:22px; background:var(--accent2); color:#fff; font-size:11px; padding:4px 11px; border-radius:999px; }
.price-card .was{ font-size:15px; color:var(--text-dim); text-decoration:line-through; margin-top:6px; }
.price-card .was + .amt{ margin-top:0; }
.price-card .amt{ font-family:var(--font-sans); font-weight:700; font-size:32px; margin-top:6px; }
.price-card .amt sup{ font-size:15px; top:-12px; }
.price-card .per{ font-size:13px; color:var(--text-dim); }
.price-card .credit-line{ font-size:13.5px; font-weight:600; color:var(--accent2); margin-top:4px; }
.price-card ul{ list-style:none; padding:0; margin:18px 0 22px; font-size:13.5px; color:var(--text-dim); }
.price-card li{ padding:6px 0 6px 22px; border-top:1px solid var(--line); position:relative; }
.price-card li:first-child{ border-top:none; }
.price-card li::before{ content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700; }
.price-note{ font-size:13.5px; color:var(--text-dim); margin-top:20px; }

/* ---------- pricing: Standard视图的Credit Pack卡片(2026-10，网站修改13设计图替换) ----------
   复用.price-card的基础外观(背景/边框/圆角/阴影)，下面这些规则只加新东西，不改
   .price-card本身的规则——solutions/standard.html也在用.price-card/.price-grid，
   不能因为这次改动牵连到那边。 */
.credit-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 20px; }
.credit-pill{ background:var(--card); border:1px solid var(--line); border-radius:999px; padding:10px 20px; font-size:13.5px; color:var(--text-dim); }
.credit-pill b{ color:var(--accent); font-weight:700; }
.launch-price-banner{ background:rgba(217,142,28,0.12); border-radius:var(--radius); padding:16px 22px; text-align:center; max-width:900px; margin:0 auto 28px; }
.launch-price-banner p{ font-size:13.5px; color:var(--text-dim); margin:4px 0; }
.launch-price-banner p b{ color:var(--accent); }
.launch-price-banner p:last-child{ color:var(--text); }
.credit-pack-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.pack-card{ display:flex; flex-direction:column; padding:22px 14px; }
.pack-card.featured{ border-color:var(--accent); border-width:2px; box-shadow:0 12px 32px rgba(217,142,28,0.18); }
.pack-tag{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.pack-card .per{ font-family:var(--font-sans); font-weight:700; font-size:17px; color:var(--text); margin-top:2px; }
.pack-card .pack-sub, .pack-card .pack-standard-price{ font-size:12.5px; color:var(--text-dim); margin-top:10px; }
.pack-card .amt{ font-size:28px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pack-card .launch-label{ font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); }
.pack-card .credit-line{ color:var(--accent); margin-top:2px; }
.pack-card hr{ border:none; border-top:1px solid var(--line); margin:16px 0 14px; }
.pack-use-title{ font-size:13px; font-weight:700; margin:0 0 4px; }
.pack-use{ font-size:12.5px; color:var(--text-dim); margin:0 0 18px; flex:1; }
.pack-card .btn{ margin-top:auto; padding:11px 6px; font-size:12px; }
.badge-corner{ position:absolute; top:-1px; right:14px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:6px 12px; border-radius:0 0 8px 8px; }
/* pricing页5张卡片下面的Custom Amount(任意数量credits，$1/credit) */
.custom-credit-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin-top:14px; box-shadow:var(--shadow-card); }
.ccc-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ccc-title{ font-weight:700; font-size:17px; color:var(--text); margin-top:2px; }
.ccc-sub{ font-size:13px; color:var(--text-dim); margin:4px 0 0; }
.ccc-sub b{ color:var(--accent); }
.ccc-head .btn{ padding:11px 18px; font-size:13px; }
.ccc-body{ border-top:1px solid var(--line); margin-top:16px; padding-top:16px; }
.ccc-body[hidden]{ display:none; }
.ccc-body label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.ccc-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ccc-row input{ width:160px; padding:10px 12px; font-size:15px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); font-family:inherit; }
.ccc-total{ font-size:15px; color:var(--text-dim); }
.ccc-total b{ font-size:22px; color:var(--text); }
.ccc-row .btn{ margin-left:auto; padding:11px 18px; font-size:13px; }
.ccc-row .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.ccc-error{ font-size:12.5px; color:var(--accent2); margin:8px 0 0; }
.ccc-error[hidden]{ display:none; }
@media (max-width:640px){ .ccc-row .btn{ margin-left:0; width:100%; } }
.btn-accent{ background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 20px -8px rgba(217,142,28,0.55); }
.btn-accent:hover{ background:var(--accent-hover); transform:translateY(-1px); }
.pack-compare-bar{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:28px; }
.pcb-lead{ background:var(--text); color:#fff; padding:24px; }
.pcb-lead h3{ font-size:17px; margin:0 0 6px; color:#fff; }
.pcb-lead p{ font-size:12.5px; color:#C7C7CC; margin:0; }
.pcb-col{ background:var(--bg2); padding:24px; border-left:1px solid var(--line); }
.pcb-col .eyebrow{ color:var(--accent); margin-bottom:8px; }
.pcb-col p{ font-size:13px; font-weight:600; color:var(--text); margin:0; line-height:1.5; }
/* 2026-10-11：Joey反馈"网站上显示的是上下并排(两行)，要的是左右并排"——原来这个断点是
   1080px，站点容器本身最大只有1120px(--maxw)，稍微窄一点的桌面/笔记本窗口(很常见，比如
   开着DevTools、或者没最大化)就会落进1080px以下，5张卡片立刻挤成3+2两行，看起来就是
   "上下排列"而不是设计图里那种稳稳当当一整行5张。改成实测出来的最低安全值：950px以上
   5列不换行、不挤出第二行(卡片padding/按钮字号也一并收紧了，不然"Create Free Account"
   这类较长的文字会在窄卡片里自己先换行)，低于950才退到3列——这样绝大多数桌面/笔记本窗口
   都能看到跟设计图一致的一整行5张卡片。 */
@media (max-width:950px){ .credit-pack-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .pack-compare-bar{ grid-template-columns:1fr; } .pcb-col{ border-left:none; border-top:1px solid var(--line); } }
@media (max-width:640px){ .credit-pack-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .credit-pack-grid{ grid-template-columns:1fr; } }

/* 2026-10-11：create-event Step3"Need more credit?"卡片里复用.credit-pack-grid，
   但容器只有.flow-wrap的640px宽(减去.card/.flow-wrap的padding，实际能用的也就
   530px左右)——上面那几条媒体查询是按"视口宽度"算的，桌面视口通常远大于950px，
   套不到窄屏那几档，所以这里会落在默认的5列(或950px那档的3列)，在530px宽的容器里
   挤得很窄。加这个修饰类，不管视口多宽，固定2列，卡片宽度来自"容器实际有多宽"而
   不是"视口有多宽"。 */
.credit-pack-grid-narrow{ grid-template-columns:repeat(2,1fr) !important; }
@media (max-width:420px){ .credit-pack-grid-narrow{ grid-template-columns:1fr !important; } }

/* ---------- Pricing页Enterprise视图：两栏(左介绍/右表单) ---------- */
.ent-form-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:20px; align-items:start; max-width:1000px; margin:0 auto; }
.ent-form-left h3, .ent-form-right h3{ font-size:19px; margin:0 0 16px; }
.ent-content-list dt{ font-weight:700; font-size:14px; margin-top:14px; }
.ent-content-list dt:first-child{ margin-top:0; }
.ent-content-list dd{ margin:3px 0 0; font-size:13px; color:var(--text-dim); }
.ent-form-left hr{ border:none; border-top:1px solid var(--line); margin:20px 0; }
.ent-steps{ list-style:none; padding:0; margin:14px 0; }
.ent-steps li{ display:flex; align-items:center; gap:10px; font-size:13.5px; padding:6px 0; }
.ent-steps .n{ width:22px; height:22px; flex:none; border-radius:50%; background:var(--bg2); color:var(--accent2); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ent-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.ent-form-right label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.ent-form-right .req{ color:var(--accent2); font-weight:400; }
.ent-form-right input[type="text"], .ent-form-right input[type="email"], .ent-form-right input[type="date"], .ent-form-right select, .ent-form-right textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:#fff; font:inherit; font-size:13.5px; color:var(--text); margin-top:0;
}
.ent-form-field{ margin-bottom:14px; }
.ent-checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-top:6px; }
.ent-checkbox-line{ display:flex; align-items:center; gap:7px; font-weight:400; font-size:13px; margin-top:6px; }
.ent-checkbox-line input{ width:auto; margin:0; }
.ent-checkbox-line label{ display:inline; font-weight:400; margin:0; }
@media (max-width:820px){ .ent-form-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .ent-form-row, .ent-checkbox-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .price-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
/* 2026-10-06(网站修改6)："FAQ这个的行间距都不对"(多个页面重复反馈)——参照FAQ最新设计图
   (修改4 WechatIMG25348)问答列表的疏密程度，把每行上下padding从20px收到14px，展开答案的
   底部padding也从20px收到14px。这套.faq-item/.faq-q/.faq-a是全站共用样式，受影响的页面：
   faq.html、pricing.html、solutions/standard.html、solutions/enterprise.html、
   solutions/speaker-content.html、solutions/exhibitor-content.html、
   solutions/event-recap-videos.html、solutions/event-photos-galleries.html、
   solutions/headshot-booth.html——改一处全部生效。 */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 2px; font-size:15.5px; font-weight:500; color:var(--text);
  font-family:var(--font-sans);
}
.faq-q .plus{ font-size:20px; color:var(--accent2); transition:transform .2s ease; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:14.5px; }
.faq-item.open .faq-a{ max-height:240px; }
.faq-a p{ padding:0 2px 14px; }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.about-stats{ display:flex; gap:36px; margin-top:24px; }
.about-stats b{ font-family:var(--font-sans); font-weight:700; display:block; font-size:26px; color:var(--accent2); }
.about-stats span{ font-size:12.5px; color:var(--text-dim); }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }

/* ---------- cards generic ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-card); }

/* ---------- CTA band ---------- */
.cta-band{
  /* 2026-10-01：原来是黑色渐变，Joey要求换个颜色——改成跟全站主色(--accent2)一个色系的深蓝渐变 */
  background:linear-gradient(135deg,var(--accent2),#0A1B33);
  color:#F5F5F7; border-radius:20px; padding:28px 48px;
  /* 2026-10-06(网站修改6，"所有的页面的这个蓝色方块...太高了，应该是很长很窄的"，多次重复)：
     上下padding从56px减到28px(减半)。量过修改1 Enterprise页mock图(WechatIMG25311)里这个
     CTA band的实测比例：带里面文字和按钮的整条高度大约是页面宽度的15.7%，明显比原来56px
     padding撑出来的高度扁——这不是精确像素值(图是截图不是设计源文件)，是按这个比例估的，
     视觉上改窄很多但没有把按钮/文字挤到贴边。 */
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ color:#F5F5F7; font-size:clamp(22px,2.6vw,30px); margin:0; max-width:480px; }
.cta-band p{ color:#A1A1A6; }

/* ---------- use case detail page ---------- */
.uc-hero{
  padding:64px 0 20px; text-align:center;
}
.uc-hero > div{ max-width:640px; margin:0 auto; }
.uc-hero h1{ justify-content:center; }
.uc-hero .sub{ margin-left:auto; margin-right:auto; }
.uc-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; text-align:left;}
.uc-fact{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.uc-fact h4{ font-size:12.5px; text-transform:none; color:var(--text-dim); margin:0 0 4px; font-family:var(--font-sans); font-weight:600;}
.uc-fact p{ font-size:14px; margin:0; }
.uc-hero-visual{
  aspect-ratio:16/9; border-radius:20px; background:linear-gradient(150deg,#E9CE9F,#D98E1C 55%,#B6432E);
  max-width:760px; margin:40px auto 0; display:flex; align-items:center; justify-content:center;
}

/* 用例页顶部合并后的"概览"框(原来是4个小框：Typical guests/uploads/Delivery/Pricing) */
.uc-fact-merged{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-top:24px; text-align:left; }
.uc-fact-merged h4{ font-size:12.5px; text-transform:none; color:var(--text-dim); margin:0 0 4px; font-family:var(--font-sans); font-weight:600; }
.uc-fact-merged p{ font-size:14px; margin:0; }

/* 照片轮播器(视频上方) */
.uc-hero > .uc-carousel{ max-width:760px; margin:40px auto 0; }
.uc-carousel{ position:relative; max-width:760px; margin:40px auto 0; border-radius:20px; overflow:hidden; aspect-ratio:16/9; background:var(--line); }
.uc-car-track{ display:flex; height:100%; transition:transform .5s ease; }
.uc-car-slide{ flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; }
.uc-car-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.uc-car-label{ display:block; text-align:center; font-size:14px; font-weight:600; color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.25); }
.uc-car-label .slot-dim{ color:rgba(255,255,255,.78); text-shadow:0 1px 8px rgba(0,0,0,.25); }
.uc-car-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(255,255,255,.88); color:var(--text); font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.uc-car-btn:hover{ background:#fff; }
.uc-car-btn.prev{ left:12px; }
.uc-car-btn.next{ right:12px; }
.uc-car-dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:8px; }
.uc-car-dots button{ width:8px; height:8px; padding:0; border-radius:50%; border:none; background:rgba(255,255,255,.55); cursor:pointer; }
.uc-car-dots button[aria-current="true"]{ background:#fff; width:22px; border-radius:99px; }
.uc-hero > .uc-carousel + .uc-hero-visual{ max-width:760px; margin-top:20px; }
@media (prefers-reduced-motion: reduce){ .uc-car-track{ transition:none; } }

/* 2026-10："露边"样式(initPhotoCarousel的peek选项)：当前图占大部分宽度，左右露出
   相邻图片的边——外层不再裁切/不再是一个整体圆角矩形，圆角和裁切各自放到每张slide
   身上，这样相邻图片之间看得到缝隙，跟mock图("Ten years of remarkable moments")
   一致。 */
.uc-carousel.peek{ max-width:none; overflow:visible; border-radius:0; background:none; aspect-ratio:unset; }
.peek .uc-car-track{ gap:16px; }
.peek .uc-car-slide{ flex:0 0 82%; aspect-ratio:3/2; border-radius:20px; overflow:hidden; background:var(--line); }
@media (max-width:720px){ .peek .uc-car-slide{ flex-basis:90%; } }

/* ---------- 卡片轮播(initCardCarousel：证言这类非图片内容) ---------- */
/* 2026-10网站修改15修复(两轮)：
   1) overflow:hidden原来跟transform:translateX同时作用在.card-car-track自己身上——轨道
      裁剪自己的滚动窗口会跟着轨道一起平移，等于裁剪窗口从不真正裁掉任何东西，index非0时
      整条轨道飘到.card-carousel外部不可见(首页3条占位证言时没人留意到，这次填入4条真实
      证言验证轮播才发现)。
   2) 第一轮修复把overflow:hidden直接搬到.card-carousel上，但.card-carousel左右有46px
      padding(留给prev/next箭头的位置)——裁剪边界在padding外沿，而轨道紧贴padding内沿，
      两者之间这46px的缝隙里，相邻那张卡片的边缘会露出一截(Joey反馈"不整齐"，截图能看到
      右边缘卡片名字的局部文字)。这次加一层不带padding的.card-car-viewport，贴着轨道实际
      宽度裁剪(initCardCarousel的JS把track包了一层viewport)，箭头仍然摆在外层.card-carousel
      的padding区，不受这层裁剪影响。
   另外4条证言长短差很多(Taeyoul Park那条明显更长)，轮播到不同条目时卡片高度跳来跳去也是
   "不整齐"的一部分——第二轮给卡片设了保底高度(min-height)+垂直居中，但这只保证矮的几条
   不会更矮，最长那条还是会把自己的卡片撑得比其它三条明显更高更大。
   2026-10网站修改15(第三轮)：Joey进一步要求"四张大小完全一样"——改成JS量出最高的那张
   实际需要多高(initCardCarousel的syncSlideHeights())，把这个高度设成每张.card-car-slide
   的固定height，四张外框从此完全一致；.tm-card.plain改成height:100%把自己撑满这个固定
   高度，配合flex居中让内容(不管长短)都摆在卡片正中间，不是贴顶。 */
.card-carousel{ position:relative; padding:0 46px 36px; }
.card-carousel .card-car-viewport{ overflow:hidden; border-radius:var(--radius); }
.card-car-track{ display:flex; transition:transform .5s ease; }
.card-car-slide{ flex:0 0 100%; min-width:0; padding:0 2px; }
.card-carousel .tm-card.plain{ height:100%; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
.card-carousel .uc-car-btn{ top:calc(50% - 18px); background:var(--card); border:1px solid var(--line); color:var(--text); }
.card-carousel .uc-car-btn:hover{ background:var(--bg2); }
.card-carousel .uc-car-dots{ bottom:0; }
.card-carousel .uc-car-dots button{ background:var(--line); }
.card-carousel .uc-car-dots button[aria-current="true"]{ background:var(--accent2); width:22px; }

/* ---------- Apple-style page hero (How it Works / Pricing / FAQ) ---------- */
.page-hero{ text-align:center; padding:88px 0 56px; }
.page-hero h1{ font-size:clamp(34px,5vw,56px); }
.page-hero .sub{ font-size:18px; max-width:520px; margin:0 auto; }

/* ---------- Apple-style centered homepage hero ---------- */
/* 2026-10网站修改11(25840 mock图，取代网站修改9的25740版)：Joey上传了新的首页设计图，
   背景改成了统一的浅蓝纯色，不再是修改9那版两角光晕——取色这张新图四角+中心，
   全部落在(236-239,243-245,252-254)这个很窄的范围内，是同一个纯色，不是渐变/光晕。
   这个色值跟下面"Ten years of remarkable moments"板块本来就在用的#EEF3F9几乎一样，
   直接复用同一个值，让hero和那个板块背景色统一。 */
.hero-glow{ background:#EEF3F9; }
/* 2026-10-11：Joey反馈首页标题/副标题/数字都偏大，显得首页"空"——整体收紧一档
   (hero上下padding、标题/副标题字号、数字区的间距和字号都调小)。改前的值(上一版)：
   .hero-centered{ padding:104px 0 40px; }
   .hero-centered h1{ font-size:clamp(38px,6.2vw,72px); margin:0 auto .38em; }
   .hero-centered .sub{ font-size:20px; margin:0 auto 36px; }
   .hero-centered .hero-actions{ margin-bottom:56px; }
   .stats-prominent{ margin-top:0; gap:48px 64px; } .stats-prominent b{ font-size:48px; }
   @media(max-width:720px){ .stats-prominent{ gap:36px 40px; } .stats-prominent b{ font-size:36px; } }
   (.live-stats本身的margin-top/padding-top没动——about.html和solutions/enterprise.html
   也在用这个基础类，只在.stats-prominent里加负margin-top把首页这块拉紧，不影响那两页)
   想恢复旧版直接把上面这几条数值抄回下面对应的属性就行，git历史里commit前也有完整旧版。 */
.hero-centered{ text-align:center; padding:76px 0 28px; }
.hero-centered h1{ font-size:clamp(32px,5vw,56px); max-width:780px; margin:0 auto .34em; }
/* 2026-10网站修改9(25740 mock图)："Worth sharing."渐变蓝——从取色mock图样本来看不是强烈的
   撞色渐变，是同一片中蓝到深蓝(跟--accent2同色系)的柔和过渡，所以渐变终点直接用--accent2，
   跟站内其它蓝保持同一色系，不另起一个新蓝。 */
.grad-blue{
  background:linear-gradient(90deg, #3B74C4, var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-centered .sub{ font-size:16.5px; line-height:1.5; font-weight:400; max-width:520px; margin:0 auto 26px; }
.hero-centered .hero-actions{ margin-bottom:36px; }
.hero-visual-big{
  aspect-ratio:16/9; border-radius:24px; max-width:880px; margin:0 auto;
  background:linear-gradient(150deg,#E9CE9F,#D98E1C 55%,#B6432E);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 30px 70px -20px rgba(182,67,46,0.35);
}

.live-stats{
  display:flex; justify-content:center; gap:56px; flex-wrap:wrap;
  margin-top:56px; padding-top:40px; border-top:1px solid var(--line);
}
.live-stats div{ text-align:center; margin:0 28px; }
.live-stats b{ font-family:var(--font-sans); font-weight:700; display:block; font-size:28px; font-weight:500; color:var(--accent2); }
.live-stats span{ font-size:12.5px; color:var(--text-dim); }

/* 2026-10-01：首页专用，数字比平时(.live-stats默认)更显眼(Joey反馈"数字变得显眼一点") */
.stats-prominent{ border-top:none; margin-top:-20px; padding-top:0; gap:36px 52px; }  /* 2026-10-02：改成4组数字，gap比2组时收窄一点 */
.stats-prominent b{ font-size:36px; font-weight:700; }
.stats-prominent span{ font-size:13px; letter-spacing:.02em; }
/* 2026-10网站修改11(25840 mock图)：4组数字之间加了竖线分隔——用::before贴在每一项
   (第一项除外)左边，定位在gap正中间(gap是64px，所以divider离自己左边-32px)，不用
   border-left/padding，这样不占盒子空间、不会把flex布局的间距挤变。换行(flex-wrap)的
   情况下第二行最左边那项理论上也会带一条线，但这4项在能触发换行的窄屏下已经被下面
   max-width:720px那条规则直接隐藏掉了，不会出现这个问题。 */
/* 2026-10-13(batch 4)：原来写死left:-32px(按"gap 64px"算的)，但实际两项之间是 外边距28px + 列间距
   + 外边距28px，线偏到了右边那项旁边(桌面偏22px，820px以下偏12px)。现在按 -(28px + 列间距/2)
   算；--sp-gx跟实际生效的列间距保持一致(820px以下.live-stats{gap:32px}会盖掉上面的52px)。 */
.stats-prominent{ --sp-gx:52px; }
@media (max-width:820px){ .stats-prominent{ --sp-gx:32px; } }
.stats-prominent div:not(:first-child){ position:relative; }
.stats-prominent div:not(:first-child)::before{
  content:""; position:absolute; left:calc(-28px - var(--sp-gx) / 2); top:6px; bottom:6px; width:1px; background:var(--line);
}
/* 4项在约945px以下会换成两行(3+1)，第二行开头那项也带着一条线。721-1000px改成固定的2x2，
   只在同一行的两项之间画线 */
@media (min-width:721px) and (max-width:1000px){
  .stats-prominent{ display:grid; grid-template-columns:repeat(2, auto); justify-content:center; column-gap:var(--sp-gx); }
  .stats-prominent div:nth-child(odd)::before{ display:none; }
}
@media (max-width:720px){
  .stats-prominent{ gap:28px 32px; }
  .stats-prominent b{ font-size:28px; }
  .stats-prominent div:not(:first-child)::before{ display:none; }
}

/* 2026-10-06：solutions/enterprise.html "Global experience"板块右边那3项(Dedicated
   coordination/Works with your team/Human quality review)要上下摆放，不是.live-stats
   默认的一行并排——加这个修饰类改成纵向、左对齐，数字那组(左边)不受影响。 */
.live-stats-col{ flex-direction:column; align-items:flex-start; gap:18px; }
.live-stats-col div{ text-align:left; margin:0; }

.live-pill{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:12.5px; color:var(--accent2); font-weight:600;
}

@media (max-width:820px){ .uc-hero > div{ max-width:100%; } .live-stats{ gap:32px; } }

/* ---------- forms ---------- */
.form-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px; max-width:560px; box-shadow:var(--shadow-card); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--line);
  background:#fff; font:inherit; font-size:14.5px; color:var(--text);
}
.field .hint{ font-size:12.5px; color:var(--text-dim); margin-top:5px; }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; }

.progress3{ display:flex; gap:8px; margin-bottom:36px; }
.progress3 > div{ flex:1; display:flex; flex-direction:column; gap:6px; }
.progress3-label{ font-size:13.5px; font-weight:600; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.progress3-bar{ display:block; height:4px; border-radius:99px; background:var(--line); }
.progress3 > div.active .progress3-label{ color:var(--text); }
.progress3 > div.active .progress3-bar{ background:var(--accent2); }
@media (max-width:480px){ .progress3-label{ font-size:11px; } }

.pack-pick{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-items:start; }  /* 2026-10-01：Free/Member Pro隐藏(见.retired-tier)后只剩2个看得见的套餐 */
.pack-opt{ border:2px solid var(--line); border-radius:10px; padding:12px 8px; text-align:center; cursor:pointer; background:var(--card); }
.pack-opt.selected{ border-color:var(--accent2); }
.pack-opt b{ font-family:var(--font-sans); font-weight:700; display:block; font-size:17px; color:var(--accent2); }
.pack-opt span{ font-size:11px; color:var(--text-dim); }
.pack-opt .was{ font-size:12px; font-weight:400; color:var(--text-dim); text-decoration:line-through; margin-right:3px; }
.pack-toggle{ display:block; width:100%; margin-top:8px; padding:4px 0; background:none; border:none; font:inherit; font-size:11.5px; font-weight:600; color:var(--accent2); cursor:pointer; }
.pack-toggle:hover{ text-decoration:underline; }
.pack-details{ margin:6px 0 0; padding:8px 0 0 16px; border-top:1px solid var(--line); text-align:left; font-size:11.5px; line-height:1.45; color:var(--text); }
.pack-details li{ margin-bottom:3px; }
.pack-details .pack-credit{ list-style:none; margin-left:-16px; font-weight:700; color:var(--text); }
.pack-details .pack-note{ list-style:none; margin-left:-16px; color:var(--text-dim); }
.pack-details[hidden]{ display:none; }
@media (max-width:640px){ .pack-pick{ grid-template-columns:1fr 1fr; } }

/* 2026-10-11：create-event Step2服务选择——每个产品一行(图标+文字+单价+数量步进器)，
   取代原来的高光视频模板选择器(template-pick/template-card，已删)，后来又从
   "单选+勾选框"改成"每个产品都能要多份"(Joey要求)。底下.svc-summary显示总计+余额。 */
.svc-list{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.svc-row{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.svc-row:last-child{ border-bottom:none; }
.svc-row[hidden]{ display:none; } /* .svc-row自己设了display:flex，跟[hidden]默认的
  display:none同优先级(都是单个class/属性选择器)，后出现的.svc-row会赢，光靠HTML的
  hidden属性盖不住——需要这条显式覆盖，跟.wm-era-logo[hidden]是同一个道理 */
.svc-row.qty-active{ background:var(--bg2); }
.svc-icon{ font-size:22px; flex-shrink:0; width:30px; text-align:center; }
.svc-text{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.svc-text b{ font-size:14.5px; }
.svc-text .dim{ font-size:11.5px; color:var(--text-dim); font-weight:400; }
.svc-unit{ font-size:13px; font-weight:600; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
.svc-unit .dim{ font-weight:400; }
.qty-stepper{
  display:flex; align-items:center; gap:0; flex-shrink:0;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.qty-btn{
  width:30px; height:30px; border:none; background:var(--bg2); color:var(--text);
  font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.qty-btn:hover{ background:var(--line); }
.qty-btn:disabled{ opacity:.35; cursor:not-allowed; }
.qty-val{ width:30px; text-align:center; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
/* iOS风格拨动开关——"Remove ERA logo"这种单个加购开关用，跟上面数量步进器的产品行
   共用.svc-row/.svc-icon/.svc-text/.svc-unit，只是右边换成开关而不是+/-。 */
.svc-toggle{
  appearance:none; -webkit-appearance:none; position:relative; flex-shrink:0;
  width:42px; height:25px; border-radius:99px; background:var(--line);
  margin:0; cursor:pointer; transition:background .18s ease;
}
.svc-toggle::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .18s ease;
}
.svc-toggle:checked{ background:var(--accent2); }
.svc-toggle:checked::after{ left:19.5px; }
.svc-summary{
  margin-top:16px; border:1px solid var(--line); border-radius:10px; padding:14px 18px;
  background:var(--bg2); display:flex; flex-direction:column; gap:8px;
}
.svc-summary-row{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--text-dim); }
.svc-summary-row b{ color:var(--text); font-weight:600; }
.svc-summary-row.total{ padding-top:8px; border-top:1px solid var(--line); font-size:14.5px; color:var(--text); }
.svc-summary-row.total b{ color:var(--accent2); font-size:18px; }
@media (max-width:480px){
  .svc-row{ flex-wrap:wrap; padding:14px; }
  .svc-unit{ order:3; margin-left:44px; }
  .qty-stepper{ order:4; margin-left:auto; }
}

/* ---------- banner picker / cropper ---------- */
.banner-picker{ margin-bottom:6px; }
.banner-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.banner-thumb{
  position:relative; width:150px; aspect-ratio:1125/400; border-radius:8px;
  overflow:hidden; border:1px solid var(--line); background:var(--bg2);
}
.banner-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.banner-thumb-remove{
  position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,0.7); color:#fff; border:none; font-size:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.banner-thumb-remove:hover{ background:var(--accent2); }
.banner-add-tile{
  width:150px; aspect-ratio:1125/400; border-radius:8px; border:1.5px dashed var(--line);
  background:var(--bg2); color:var(--text-dim); cursor:pointer; font-size:22px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:inherit;
}
.banner-add-tile span{ font-size:11px; }
.banner-add-tile:hover{ border-color:var(--accent2); color:var(--accent2); }
.crop-viewport{
  position:relative; width:100%; max-width:420px; aspect-ratio:1125/400; overflow:hidden;
  border-radius:10px; background:#20180F; cursor:grab; touch-action:none;
}
.crop-viewport.dragging{ cursor:grabbing; }
.crop-viewport img{
  position:absolute; top:0; left:0; max-width:none; user-select:none;
  transform-origin:0 0; pointer-events:none;
}
.crop-controls{ display:flex; align-items:center; gap:12px; margin-top:12px; max-width:420px; }
.crop-controls input[type=range]{ flex:1; accent-color:var(--accent2); }
.crop-controls .zoom-icon{ font-size:12px; color:var(--text-dim); }

/* ---------- watermark manager ---------- */
.wm-manager{ margin-bottom:6px; }
.wm-stage-label{ font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; }
/* 预览区跟ERA后台相册的水印编辑画布同比例(3:2)，位置百分比跟ERA那边一一对应。
   ERA那边的像素大小跟屏幕高度走(宽=0.75*屏高、高=0.5*屏高)，这里固定成288x192
   (刻意做得很小：最早是480x360，后来384x256，用户两次都嫌大)，放在表单里也不会撑破布局 */
/* 预览图和调节滑块并排(滑块在预览图右边)；容器太窄放不下时，滑块自动换到预览图下面 */
.wm-editor{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }
.wm-stage{
  position:relative; flex:0 1 288px; width:100%; max-width:288px; aspect-ratio:3/2; overflow:hidden;
  border-radius:10px; border:1px solid var(--line); user-select:none;
}
.wm-notice{
  position:absolute; left:6px; right:6px; top:6px; z-index:5; pointer-events:none;
  background:rgba(0,0,0,0.8); color:#fff; font-size:11px; line-height:1.3;
  padding:4px 8px; border-radius:6px; text-align:center;
}
.wm-notice[hidden]{ display:none; }
.wm-stage-bg{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(150deg,#E9CE9F,#D98E1C 60%,#B6432E);
}
/* 2026-10-11：ERA自己的默认logo，固定贴在预览区左上角，不能拖/不算进organizer的
   WATERMARK_MAX_COUNT——只是给"photos and videos"步"Remove ERA logo (+30 credits)"
   那个勾选框一个所见即所得的预览，勾上就在JS里把这个元素隐藏。
   网站修改18：大小/位置按Joey截图(ERA后台相册批量水印设置，水印大小46/不透明度1000/
   横向边距21/纵向边距23)实测像素比例换算——logo约占画布宽13.8%、高6.5%，上下左右
   边距都约等于画布尺寸的2%，且完全不透明(没有之前的.92透明度)。 */
.wm-era-logo{
  position:absolute; top:2%; left:2%; width:13.8%; max-width:40px;
  opacity:1; pointer-events:none; z-index:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.wm-era-logo[hidden]{ display:none; }
.wm-item{
  position:absolute; border:1.5px dashed rgba(255,255,255,0.85); border-radius:4px;
  cursor:move; box-sizing:border-box;
}
.wm-item img{ width:100%; height:100%; object-fit:contain; pointer-events:none; display:block; }
.wm-remove{
  position:absolute; top:-7px; right:-7px; width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,0.8); color:#fff; border:none; font-size:9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1; z-index:2;
}
.wm-remove:hover{ background:var(--accent2); }
.wm-handle{
  position:absolute; right:-5px; bottom:-5px; width:11px; height:11px; border-radius:50%;
  background:#fff; border:2px solid var(--accent2); cursor:nwse-resize;
}
.wm-toolbar{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.wm-item.active{ border-color:var(--accent2); border-style:solid; }

/* 调节面板：跟预览区同宽，每个滑块"标签+控件"压成一行，整体尽量小 */
.wm-panel{
  flex:1 1 230px; min-width:230px; align-self:center; padding:6px 8px; background:var(--card);
  border:1px solid var(--line); border-radius:8px;
}
.wm-slider-row{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.wm-slider-row:last-child{ margin-bottom:0; }
.wm-slider-row label{ flex:0 0 74px; margin:0; font-size:10.5px; font-weight:600; line-height:1.15; white-space:nowrap; }
.wm-slider-row label .dim{ display:block; font-weight:400; color:var(--text-dim); font-size:9.5px; }
.wm-slider-control{ flex:1; min-width:0; display:flex; align-items:center; gap:4px; }
.wm-slider-control button{
  width:16px; height:16px; border-radius:4px; border:1px solid var(--line); background:#fff;
  font-size:10px; line-height:1; cursor:pointer; flex-shrink:0; font-family:inherit; padding:0;
}
.wm-slider-control button:hover{ border-color:var(--accent2); color:var(--accent2); }
.wm-slider-control input[type=range]{
  flex:1; min-width:0; width:auto; height:12px; margin:0; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  /* 表单里的".field input"会给所有输入框加内边距/边框/圆角(当文本框用)，
     滑块不该吃到这套样式，否则会被包进一个大胶囊里、根本缩不小 */
  padding:0; border:0; border-radius:0; background:transparent;
}
.wm-slider-control input[type=range]::-webkit-slider-runnable-track{ height:2px; border-radius:2px; background:var(--line); }
.wm-slider-control input[type=range]::-moz-range-track{ height:2px; border-radius:2px; background:var(--line); }
.wm-slider-control input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:9px; height:9px; border-radius:50%;
  background:var(--accent2); border:none; margin-top:-3.5px;
}
.wm-slider-control input[type=range]::-moz-range-thumb{ width:9px; height:9px; border-radius:50%; background:var(--accent2); border:none; }
.wm-slider-val{ font-size:10px; color:var(--text-dim); width:26px; text-align:right; flex-shrink:0; }


/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.5); z-index:80;
  display:none; align-items:flex-start; justify-content:center; padding:5vh 20px; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--bg); border-radius:16px; max-width:520px; width:100%;
  padding:30px 28px; position:relative;
}
.modal-close{
  position:absolute; top:16px; right:18px; background:none; border:none;
  font-size:20px; color:var(--text-dim); cursor:pointer;
}

/* ---------- video lightbox(2026-10网站修改9：小视频点开放大播放) ---------- */
.video-lightbox-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.85); z-index:90;
  display:none; align-items:center; justify-content:center; padding:5vh 20px;
}
.video-lightbox-overlay.open{ display:flex; }
.video-lightbox-box{ position:relative; max-width:960px; width:100%; }
.video-lightbox-box video{ width:100%; max-height:85vh; border-radius:12px; display:block; background:#000; }
.video-lightbox-close{
  position:absolute; top:-38px; right:0; background:none; border:none;
  font-size:26px; color:#fff; cursor:pointer; line-height:1;
}

/* ---------- account ---------- */
.acct-grid{ display:grid; grid-template-columns:280px 1fr; gap:32px; }
.acct-side .card{ margin-bottom:16px; }
.balance-num{ font-family:var(--font-sans); font-weight:700; font-size:34px; color:var(--accent2); }
/* My Account：每一批credit的数量/来源/有效期 */
.credit-lots{ list-style:none; padding:0; margin:4px 0 12px; font-size:12.5px; color:var(--text); }
.credit-lots li{ padding:5px 0; border-top:1px solid var(--line); }
.credit-lots li:first-child{ border-top:none; }
.credit-lots .dim{ color:var(--text-dim); }
.event-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid var(--line); }
.event-row:first-child{ border-top:none; }
.event-row .status{ font-size:11.5px; padding:4px 10px; border-radius:999px; background:var(--bg2); color:var(--text-dim); }
.event-row .status.ready{ background:#E4F0DE; color:#3A6B2A; }
.event-row .status.fulfillment-active{ background:#E3EDF7; color:var(--accent2); }
.event-row .status.needs-payment{ background:#FBEFD9; color:#8A5A0A; font-weight:600; text-decoration:none; }
.event-row .status.needs-payment:hover{ background:#F5E2BC; }
.refcode{ display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px dashed var(--accent); border-radius:8px; padding:12px 14px; font-family:var(--font-sans); font-weight:700; font-size:16px; letter-spacing:.02em; }
.refcode button{ margin-left:auto; }
@media (max-width:820px){ .acct-grid{ grid-template-columns:1fr; } }

/* ---------- insight ---------- */
.insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.insight-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); }
.insight-thumb{ aspect-ratio:16/10; background:linear-gradient(150deg,#E9CE9F,#B6432E); }
.insight-card .ic-body{ padding:18px 20px; }
.insight-card h3{ font-size:16px; }
.insight-card .meta{ font-size:12px; color:var(--text-dim); }
@media (max-width:820px){ .insight-grid{ grid-template-columns:1fr; } }

.article-body{ max-width:680px; margin:0 auto; font-size:16.5px; }
.article-body h2{ font-size:23px; margin-top:1.6em; }
.article-body h3{ font-size:18px; margin-top:1.3em; }
.article-body ul, .article-body ol{ color:var(--text-dim); padding-left:1.2em; }
.article-body li{ margin-bottom:.5em; }

/* ---------- referral banner ---------- */
.ref-banner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:22px 26px;
  /* 2026-10-02：section间距调小之后不用再额外加margin了，用section自己的间距就够 */
}
.ref-banner .ref-left{ display:flex; align-items:center; gap:16px; }
.ref-banner .ref-icon{ flex:none; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:18px; }

/* ---------- Hero照片拼贴(solutions/standard.html) ---------- */
.hero-collage{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; max-width:560px; }
.hero-collage .media-slot:first-child{ grid-row:1 / 3; aspect-ratio:3/4; }
.hero-collage .media-slot{ aspect-ratio:3/2; border-radius:16px; }

/* ---------- 数字步骤+箭头(Four steps. One place.) ---------- */
.arrow-steps{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.arrow-step{ flex:1; min-width:130px; text-align:center; }
.arrow-step .n{ width:40px; height:40px; margin:0 auto 12px; border-radius:50%; background:var(--bg2); color:var(--accent2); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.arrow-step h3{ font-size:14.5px; margin:0 0 4px; }
.arrow-step p{ font-size:12.5px; color:var(--text-dim); margin:0; }
.arrow-step-sep{ flex:none; padding-top:8px; color:var(--line); font-size:20px; }
@media (max-width:720px){ .arrow-step-sep{ display:none; } .arrow-steps{ flex-direction:column; } .arrow-step{ text-align:left; display:flex; gap:14px; align-items:center; } .arrow-step .n{ margin:0; } }

/* ---------- 图片直接叠文字的场景网格(For the gatherings that matter) ---------- */
.photo-overlay-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.photo-overlay-card{ position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; display:block; }
.photo-overlay-card img, .photo-overlay-card video{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-overlay-card .media-slot{ position:absolute; inset:0; border-radius:0; z-index:0; }
.photo-overlay-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 55%); }
.photo-overlay-card .label{ position:absolute; left:14px; bottom:12px; color:#fff; font-weight:700; font-size:14px; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.3); }
@media (max-width:820px){ .photo-overlay-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .photo-overlay-grid{ grid-template-columns:1fr; } }

/* ---------- 时效说明条(icon+文字一行两组) ---------- */
.timing-bar{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; text-align:left; }
.timing-item{ display:flex; align-items:center; gap:14px; }
.timing-item .circle{ flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; }
.timing-item b{ display:block; font-size:14.5px; }

/* ---------- AI chat widget ---------- */
#chat-launcher{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent2); color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.25); cursor:pointer; border:none;
}
#chat-panel{
  position:fixed; bottom:90px; right:22px; z-index:60;
  width:340px; max-width:calc(100vw - 32px); height:440px; max-height:70vh;
  background:#fff; border-radius:16px; border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  display:none; flex-direction:column; overflow:hidden;
}
#chat-panel.open{ display:flex; }
.chat-head{ background:var(--text); color:#F5F5F7; padding:14px 16px; font-size:14px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.chat-head small{ display:block; font-weight:400; color:#A1A1A6; font-size:11.5px; margin-top:2px; }
.chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.msg{ max-width:82%; padding:9px 12px; border-radius:12px; line-height:1.4; }
.msg.bot{ background:var(--bg2); align-self:flex-start; border-bottom-left-radius:2px; }
.msg.user{ background:var(--accent2); color:#fff; align-self:flex-end; border-bottom-right-radius:2px; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.chat-suggest button{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.chat-input{ display:flex; border-top:1px solid var(--line); }
.chat-input input{ flex:1; border:none; padding:12px 14px; font:inherit; font-size:13.5px; }
.chat-input button{ background:var(--accent2); color:#fff; border:none; padding:0 18px; cursor:pointer; }

.divider-line{ border:none; border-top:1px solid var(--line); margin:0; }

/* ---------- 创建相册进度条(创建成功页，请求进行中) ---------- */
.create-progress{ max-width:420px; margin:0 auto 28px; text-align:left; }
.create-progress[hidden]{ display:none; }
.cp-status{ font-size:14px; font-weight:600; margin-bottom:10px; }
.cp-bar{ height:10px; border-radius:99px; background:var(--line); overflow:hidden; }
.cp-bar > i{ display:block; height:100%; width:0; background:var(--accent2); border-radius:99px; transition:width .18s linear; }
.cp-bar.done > i{ background:#2e9e5b; transition:width .3s ease; }
.cp-warn{ margin-top:12px; font-size:13px; color:var(--text-dim); }
#createResult[hidden]{ display:none; }
.setup-note{ max-width:420px; margin:0 auto 24px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); text-align:left; }
.setup-note[hidden]{ display:none; }
.setup-note .cp-warn{ margin-top:10px; font-size:12.5px; }

/* ---------- 上传规则提示/上限弹窗(upload-rules.js) ---------- */
body.ur-lock{ overflow:hidden; }
.ur-overlay{
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.ur-modal{
  width:100%; max-width:440px; max-height:88vh; overflow-y:auto; text-align:left;
  background:#fff; color:var(--text); border-radius:18px; padding:24px 24px 20px;
  box-shadow:0 24px 70px rgba(0,0,0,0.3);
}
.ur-title{ font-size:20px; margin:0 0 16px; }
.ur-section{ margin-bottom:14px; }
.ur-h{ font-size:13px; font-weight:700; color:var(--accent2); margin-bottom:6px; }
.ur-list{ margin:0; padding-left:18px; font-size:14px; line-height:1.65; }
.ur-p{ margin:0; font-size:14px; line-height:1.55; }
.ur-usage{ font-size:13px; line-height:1.6; color:var(--text-dim); background:var(--bg2, #f5f5f7); border-radius:10px; padding:10px 12px; margin-bottom:16px; }
.ur-usage b{ color:var(--text); }
.ur-actions{ display:flex; justify-content:flex-end; }
.ur-btn{ background:var(--accent2); color:#fff; font-weight:600; font-size:14.5px; border:none; border-radius:999px; padding:11px 28px; cursor:pointer; }

/* ---------- 2026-10修改4：FAQ页(faq.html，mock图 WechatIMG25348) ----------
   只用于faq.html：搜索框、两张切换卡片、"Which service fits"对比条、分类chip、
   "More … questions"展开、底部两栏求助卡片。单个问题的展开收起沿用上面通用的.faq-item。 */
.faq-page [hidden], .faq-group[hidden]{ display:none !important; }
.faq-search{ max-width:560px; margin:28px auto 0; }
.faq-search input{
  width:100%; padding:13px 20px 13px 44px; border:1px solid var(--line); border-radius:999px;
  font-size:15px; font-family:var(--font-sans); background:#fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236E6E73' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    no-repeat 18px center;
}
.faq-search input:focus{ outline:none; border-color:var(--accent2); }
.faq-switch{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:820px; margin:0 auto; }
.faq-switch-card{
  display:block; padding:18px 22px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--text); text-decoration:none;
}
.faq-switch-card b{ display:block; font-size:17px; margin-bottom:4px; }
.faq-switch-card span{ font-size:13.5px; color:var(--text-dim); }
.faq-switch-card.active{ background:var(--accent2); border-color:var(--accent2); }
.faq-switch-card.active b, .faq-switch-card.active span{ color:#fff; }
.faq-badge{
  font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px; background:var(--bg2); color:var(--accent2); vertical-align:middle; margin-left:6px;
}
.faq-switch-card.active .faq-badge{ background:rgba(255,255,255,.18); color:#fff; }
.faq-fit{
  display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:24px; align-items:center;
  margin:24px auto 0; padding:24px 28px; background:var(--bg2); border-radius:var(--radius);
}
.faq-fit h2{ font-size:20px; margin:0; }
.faq-fit > div{ border-left:1px solid var(--line); padding-left:20px; }
.faq-fit b{ font-size:14px; }
.faq-fit p{ font-size:13px; color:var(--text-dim); margin:4px 0 0; }
.faq-fit .faq-fit-note{ grid-column:1 / -1; text-align:center; margin:0; font-size:12.5px; }
.faq-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.faq-chip{
  padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:12.5px; font-family:var(--font-sans); color:var(--text); cursor:pointer;
}
.faq-chip.active{ background:var(--accent2); border-color:var(--accent2); color:#fff; }
.faq-list{ background:#fff; border-radius:var(--radius); padding:0 20px; }
.faq-page .faq-item.open .faq-a{ max-height:900px; } /* docx里有两段的长答案，240px不够 */
.faq-more{
  display:inline-flex; gap:8px; align-items:center; margin-top:18px; padding:0; border:none; background:none;
  font-size:14px; font-weight:600; font-family:var(--font-sans); color:var(--accent2); cursor:pointer;
}
.faq-more span{ font-size:18px; }
.faq-band{ background:var(--bg2); }
.faq-band .faq-list{ box-shadow:var(--shadow-card); }
.faq-help{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto; }
/* 2026-10-06(网站修改6)："这两个按钮不一样，高把右边按钮往下放平行"——两张卡片文字长度不同，
   按钮跟着各自段落走就会高度不一样。改成flex列，按钮用margin-top:auto压到卡片底部，
   两张卡（CSS grid默认同高）里的按钮就能对齐在同一条线上。 */
.faq-help .card{ text-align:center; display:flex; flex-direction:column; }
.faq-help .card .btn{ margin-top:auto; }
.faq-help h3{ font-size:16px; margin:0 0 6px; }
.faq-help p{ font-size:13.5px; color:var(--text-dim); margin:0 0 16px; }
@media (max-width:720px){
  .faq-switch, .faq-help{ grid-template-columns:1fr; }
  .faq-fit{ grid-template-columns:1fr; }
  .faq-fit > div{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
}

/* ---------- 2026-10修改4：产品页共用(solutions/headshot-booth.html、solutions/personalized-content.html) ----------
   面包屑、hero下面一行要点、满宽浅蓝底色带(跟首页"Ten years"那块同一个底色)、带图标的列表、
   "头像 → 动态视频"左右对照、"Plan your booth"两列清单。 */
.prod-crumbs{ font-size:13px; color:var(--text-dim); margin-bottom:18px; }
.prod-crumbs a{ color:var(--text-dim); text-decoration:none; }
.prod-crumbs a:hover{ color:var(--accent2); }
.prod-facts{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:28px; font-size:13px; color:var(--text-dim); }
.prod-facts > div{ display:flex; align-items:center; gap:8px; }
.prod-facts .ic, .prod-list .ic, .prod-plan .ic{
  flex:none; width:32px; height:32px; border-radius:50%; background:var(--bg2);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:var(--accent2);
}
.prod-band{ background:#EEF3F9; padding:56px 0; }
.prod-band + .prod-band{ padding-top:0; }
.prod-list{ list-style:none; padding:0; margin:18px 0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.prod-list li{ display:flex; align-items:center; gap:12px; }
.prod-pair{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; }
.prod-pair figure{ margin:0; }
.prod-pair figcaption{ text-align:center; font-size:12.5px; color:var(--text-dim); margin-top:8px; }
.prod-pair-arrow{ font-size:22px; color:var(--accent2); }
.prod-plan{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.prod-plan > div{ display:flex; gap:14px; align-items:flex-start; padding:18px 8px; border-bottom:1px solid var(--line); }
.prod-plan b{ font-size:14.5px; }
.prod-plan p{ font-size:13px; color:var(--text-dim); margin:2px 0 0; }
@media (max-width:720px){
  .prod-plan{ grid-template-columns:1fr; }
  .prod-band .uc-grid, .prod-band ~ section .uc-grid{ grid-template-columns:1fr !important; }
}
/* personalized-content.html：活动类型横条、深蓝"Premium"横幅、5列"Built for Organizers"、打勾列表 */
/* 2026-10-06(网站修改6，00:02 "commencements这一列的四个元素把框去掉")：去掉外框和
   分隔线，只留内容。这个类只有solutions/personalized-content.html在用，直接改共用规则。 */
.prod-types{ display:grid; grid-template-columns:repeat(4,1fr); background:#fff; }
.prod-types > div{ display:flex; gap:12px; align-items:center; padding:18px 20px; }
.prod-types .ic{ font-size:22px; }
.prod-types b{ display:block; font-size:15px; }
.prod-types span:not(.ic){ font-size:12.5px; color:var(--text-dim); }
.prod-dark{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center;
  background:var(--accent2); color:#fff; border-radius:24px; padding:40px;
}
.prod-dark h2{ color:#fff; font-size:clamp(24px,3vw,34px); margin:0 0 10px; }
.prod-dark p{ color:#C7CFDB; }
.prod-dark .eyebrow{ color:#9FB3D1; }
.prod-dark-points{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px; font-size:13px; color:#E6EBF2; }
.prod-five{ grid-template-columns:repeat(5,1fr); }
.prod-five h3{ font-size:13.5px; }
.prod-check{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--text-dim); }
.prod-check li{ position:relative; padding-left:22px; }
.prod-check li::before{ content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700; }
@media (max-width:920px){
  .prod-types{ grid-template-columns:1fr 1fr; }
  .prod-types > div:nth-child(3){ border-left:none; }
  .prod-types > div:nth-child(n+3){ border-top:1px solid var(--line); }
  .prod-five{ grid-template-columns:repeat(2,1fr); }
  .prod-dark{ grid-template-columns:1fr; padding:28px; }
}
@media (max-width:560px){
  .prod-types, .prod-five{ grid-template-columns:1fr; }
  .prod-types > div + div{ border-left:none; border-top:1px solid var(--line); }
}

/* ---------- 2026-10修改4：Insights页(insight/index.html，mock图 WechatIMG25350)、指南列表/文章页 ---------- */
.insights-hero{ background:linear-gradient(180deg, var(--bg2), var(--bg)); padding:64px 0 28px; }
.insights-hero h1{ font-size:clamp(36px,5vw,56px); margin:0 0 8px; }
.insights-lede{ font-size:clamp(20px,2.4vw,28px); line-height:1.3; color:var(--text); margin:0 0 14px; }
.insights-tabs{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:20px; padding-bottom:8px; }
.insights-tabs nav{ display:flex; gap:10px; flex-wrap:wrap; }
.insights-tabs nav a{ padding:9px 18px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; color:var(--text); text-decoration:none; background:#fff; }
.insights-tabs nav a.active{ background:var(--accent2); border-color:var(--accent2); color:#fff; }
.insights-tabs input{ min-width:240px; padding:9px 14px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:var(--font-sans); }
.insights-tabs input:focus{ outline:none; border-color:var(--accent2); }
.insights-sec[hidden], .insight-item[hidden], #insightSearchEmpty[hidden]{ display:none !important; }
.insights-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.insights-more{ font-size:13.5px; font-weight:600; color:var(--accent2); text-decoration:none; }
.insights-tag{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.insights-read{ display:inline-block; margin-top:8px; font-size:13px; font-weight:600; color:var(--accent2); }
a.insight-card{ text-decoration:none; color:inherit; }
.insights-band{ background:var(--bg2); }
.insights-news{ display:grid; grid-template-columns:minmax(0,.9fr) 1.1fr; gap:24px; align-items:center; text-decoration:none; color:inherit; padding:16px; }
.insights-news h3{ font-size:16px; margin:0 0 6px; }
.insights-news p{ font-size:13.5px; color:var(--text-dim); margin:0; }
.insights-coverage{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.insights-coverage .insights-news{ grid-template-columns:minmax(0,.8fr) 1.2fr; gap:16px; }
.guide-template{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2); padding:20px 24px; margin:12px 0; }
.guide-template p{ margin:0 0 10px; }
.guide-template p:last-child{ margin-bottom:0; }
.guide-pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; }
.guide-pager a{ color:var(--accent2); text-decoration:none; font-weight:600; }
@media (max-width:720px){
  .insights-tabs input{ min-width:0; width:100%; }
  .insights-news, .insights-coverage, .insights-coverage .insights-news{ grid-template-columns:1fr; }
  .insights-sec .story-grid{ grid-template-columns:1fr !important; }
  .guide-pager{ grid-template-columns:1fr; }
}

/* ---------- 2026-10修改4：轮播里混放视频(initPhotoCarousel的{type:"video"}幻灯片) ----------
   有图片/视频的幻灯片，文字标签默认隐藏(被真实素材盖住)；文件缺失时(.uc-car-missing)
   藏掉素材、露出底下的占位渐变和标签。 */
.uc-car-slide{ position:relative; }
.uc-car-slide video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; } /* 视频不裁切，黑边补齐 */
.uc-car-slide > img ~ .uc-car-label, .uc-car-slide > video ~ .uc-car-label{ display:none; }
.uc-car-slide.uc-car-missing > img, .uc-car-slide.uc-car-missing > video{ display:none; }
.uc-car-slide.uc-car-missing > .uc-car-label{ display:block; }
.uc-carousel.on-video .uc-car-dots{ bottom:auto; top:12px; }