/* ══ 共享头尾 chrome：本文件是唯一来源（2026-07-26 合并）══════════════════════
   以下规则原本在 home-v3.css 与 home-2026.css 各存一份（两份已漂移），本文件再在其上做覆盖。
   后果是**头尾的样貌取决于样式表加载顺序**，而两份拷贝各被不同页面加载：
     home-v3  → / · /pricing · /create/* 占位页
     home-2026 → /storybooks · /storybooks/* · /make/*
     两者都加载 → /create/picture-book · /create/animation

   以 home-v3 那份为准。两份唯一真正落到屏幕上的差异是导航链接的写法：
     home-v3   .landing2026Nav > a   （子选择器 ✅ 采用）
     home-2026 .landing2026Nav a     （后代选择器 ✗ 弃用）
   Create 下拉的条目是嵌在 .landing2026Nav 里的 <a>,后代写法会连它一起命中,且特指度 (0,1,1)
   压过本文件的 .landing2026CreateItem (0,1,0)。可见后果：加载 home-2026 的页面上,下拉标题
   被渲染成字重 900（<strong> 的默认 bolder 相对父级解析：父级 700 → 900）,其余页面是 700。
   子选择器语义才对——导航链接是直接子元素,下拉条目不是导航链接。

   ⚠ 本段是"底",必须排在下方那些覆盖规则之前；挪到文件末尾会把整套覆盖静默失效。
   ⚠ 不要再往 home-v3.css / home-2026.css 添加 .landing2026* 规则。 */

/* ── LP chrome (landing2026 header/footer), extracted from home-2026.css so home-v3 does NOT load that file (its .hero rules would collide) ── */
html.landingExportMode .landing2026Header { position: relative; }

.landing2026Header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 72px;
  border-bottom: 1px solid rgba(70,61,48,.12);
  background: rgba(251,248,241,.91);
  backdrop-filter: blur(18px);
}

.landing2026HeaderInner {
  position: relative;
  display: flex;
  width: min(calc(100% - 2*clamp(24px,4vw,72px)),1560px);
  height: 100%;
  align-items: center;
  gap: 1.25rem;
  margin: auto;
}

.landing2026Logo { display: inline-flex; margin-right: auto; }

.landing2026Logo img { display: block; width: 124px; height: auto; }

.landing2026Nav { display: flex; align-items: center; gap: clamp(.9rem,1.8vw,1.8rem); }

.landing2026Nav > a,
.landing2026SignIn {
  border: 0;
  border-block-end: 1px solid transparent;
  background: transparent;
  color: #393631;
  font: inherit;
  font-size: .87rem;
  font-weight: 700;
  padding: 6px 0 5px;
  text-decoration: none;
}

.landing2026Nav > a:hover,
.landing2026SignIn:hover { color: #278865; }

.landing2026Nav > a[aria-current="page"] {
  border-block-end-color: currentColor;
  color: var(--rk-emerald-hover);
}

.landing2026Actions { display: flex; align-items: center; gap: 1rem; }

/* 语言选择器规则已于 2026-07-26 全部迁往 landing2026-nav.css（唯一来源）。
   原因：外壳与网格曾分居两处，面板样貌取决于样式表加载顺序，导致三列被塞进 260px 而裁列。
   不要在本文件重新添加 .landing2026Language* 规则。 */
.landing2026MobileMenu { display: none; margin-left: auto; }

.landing2026MobileMenu > summary { cursor: pointer; list-style: none; font-size: 1.55rem; }

.landing2026MobilePanel {
  position: fixed;
  inset: 72px 0 auto;
  display: grid;
  border-top: 1px solid rgba(70,61,48,.12);
  background: #fffdf8;
  box-shadow: 0 20px 38px rgba(54,48,40,.12);
  padding: 1rem 1.25rem 1.25rem;
}

.landing2026MobilePanel a { border-radius: 12px; color: #393631; padding: .75rem; text-decoration: none; font-weight: 700; }

.landing2026MobilePanel a:hover { background: #dff2e9; }

.landing2026Footer { border-top: 1px solid rgba(70,61,48,.12); background: #fffdf8; color: #393631; }

.landing2026FooterInner { width: min(calc(100% - 2*clamp(24px,4vw,72px)),1560px); margin: auto; padding: 3.5rem 0 1.5rem; }

.landing2026FooterGrid { display: grid; grid-template-columns: 1.35fr repeat(3,.72fr) 1.15fr; gap: 2rem; }
/* The "AI Models" column only exists while at least one model page is publishable (see
   services/lp/chrome.js), so the track count is stated explicitly per state rather than guessed
   with auto-fit — `repeat(auto-fit, minmax(0, .72fr))` has no definite minimum and browsers do not
   agree on how many tracks that should create. With the column absent the rule above still applies
   byte for byte, so today's footer is unchanged. */
.landing2026FooterGrid[data-cols="6"] { grid-template-columns: 1.25fr repeat(4,.66fr) 1.05fr; }

.landing2026FooterBrand img { width: 124px; height: auto; }

.landing2026FooterBrand p,.landing2026FooterNewsletter p { color: #6e685e; font-size: .84rem; line-height: 1.65; }

.landing2026Footer h2 { margin: 0 0 .85rem; font-family: inherit; font-size: .86rem; }

.landing2026FooterLinks { display: grid; align-content: start; gap: .6rem; }

.landing2026Footer a { color: #6e685e; font-size: .8rem; text-decoration: none; }

.landing2026Footer a:hover { color: #176c55; }

.landing2026Social { display: flex; gap: .65rem; }

.landing2026Social a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(70,61,48,.12); border-radius: 50%; }

/* Lives inside the brand column now, under the social row — not as a full-width bar under the grid.
   So the three things that made it a bar are gone: the rule above it, the centring, and the large
   top margin that separated it from the columns. */
.landing2026FooterBottom { margin-top: 1.1rem; color: #8a8378; font-size: .76rem; }

@media (max-width: 1160px) {
  .landing2026FooterGrid { grid-template-columns: repeat(3,1fr);
  }
  /* The 6-track rule is an attribute selector, so it outranks the plain class above and would keep
     six columns all the way down to a phone — measured at 375px: six 26–75px tracks with the labels
     overflowing. Every breakpoint that restates the track list must restate it for this state too. */
  .landing2026FooterGrid[data-cols="6"] { grid-template-columns: repeat(3,1fr);
  }
  .landing2026FooterBrand,.landing2026FooterNewsletter { grid-column: span 3;
  }
}

@media (max-width: 720px) {
  .landing2026Header .landing2026Actions { display: none;
  }
  .landing2026Logo img { width: 116px;
  }
  .landing2026FooterGrid { grid-template-columns: repeat(2,1fr);
  }
  .landing2026FooterGrid[data-cols="6"] { grid-template-columns: repeat(2,1fr);
  }
  .landing2026FooterBrand,.landing2026FooterNewsletter { grid-column: span 2;
  }
}

html.export .landing2026Header{position:relative}

/* 手 40-56 */
/* ═══ FINAL CTA 结束 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER READABILITY（Andy 2026-07-20：字太小/对比太低/newsletter 窄/与 CTA 无分界）
   CSS-only 覆盖 chrome footer 规则（不改并发编辑的源区）；不压缩高度，只提可读性。回滚=删本块。
   ═══════════════════════════════════════════════════════════════════════════ */
/* 与 CTA 明确分界：更明显的上边线 + 上边距 + 顶部留白 */
.landing2026Footer{border-top:1px solid rgba(70,61,48,.22);margin-top:0}

/* CTA↔Footer 间距改由 #faq 底 padding 逐档控(§八);顶分隔线保留 */
.landing2026FooterInner{padding:clamp(50px,4.6vw,68px) 0 1.9rem}

/* 正文 ≥14px + 提高对比（原 #6e685e 太浅 → 更深墨棕） */
.landing2026Footer a{font-size:14.5px;color:#514c43}

.landing2026Footer a:hover{color:#176c55}

.landing2026FooterBrand p,.landing2026FooterNewsletter p{font-size:14.5px;color:#565046;line-height:1.62}

/* 标题 15–16px + 更深、字距微开 */
.landing2026Footer h2{font-size:15.5px;color:#33302a;margin:0 0 1rem;letter-spacing:.02em}

/* 版权行：移进品牌栏（社交图标下方），不再是跨整宽的独立条 */
.landing2026FooterBottom{font-size:13px;color:#8a8378;margin-top:1.15rem}

/* Newsletter 加宽（原 1.15fr 过窄）——仅桌面(≥1161)重定义 5 列，避免覆盖 ≤1160/≤720 的响应式列 */
.landing2026FooterGrid{gap:clamp(1.6rem,2.4vw,2.8rem)}

@media(min-width:1161px) {
  .landing2026FooterGrid {grid-template-columns:1.4fr repeat(3,.68fr) 1.62fr
  }
}

/* 订阅按钮规则已迁至 landing2026-nav.css（storybook 页共用；见该文件注释） */
/* 社交圈略大更好点 */
.landing2026Social{gap:.7rem;margin-top:1rem}

.landing2026Social a{width:38px;height:38px}

.landing2026Social svg{width:18px;height:18px}

/* ══ 以上为合并进来的底层 chrome；以下是本文件原有的覆盖与新增组件 ══ */

/* Landing 2026 shared chrome — Create dropdown (desktop + mobile) + footer newsletter CTA.
   This markup is emitted by buildHome2026Header/Footer (server/services/lp/chrome.js)
   on EVERY page using the home2026 chrome: home / pricing / create placeholders /
   storybook hub & detail. This file must be linked wherever that chrome renders —
   pages carry either home-v3.css or home-2026.css, neither of which owns these rules. */

.landing2026CreateTrigger {
  border: 0;
  border-block-end: 1px solid transparent;
  background: transparent;
  color: #393631;
  font: inherit;
  font-size: .87rem;
  font-weight: 700;
  padding: 6px 0 5px;
  text-decoration: none;
}
.landing2026CreateTrigger:hover { color: #278865; }
.landing2026CreateTrigger[aria-current="page"] {
  border-block-end-color: currentColor;
  color: var(--rk-emerald-hover);
}
.landing2026Create { position: relative; display: flex; align-items: center; }
.landing2026Create::after {
  position: absolute;
  top: 100%;
  right: -22px;
  left: -22px;
  height: 16px;
  content: '';
}
.landing2026CreateTrigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.landing2026CreateTrigger:focus-visible,
.landing2026CreateItem:focus-visible {
  outline: 3px solid var(--rk-focus-ring);
  outline-offset: 3px;
}
.landing2026CreateArrow {
  width: 10px;
  height: 7px;
  flex: none;
  transition: transform 160ms ease;
}
.landing2026CreateTrigger[aria-expanded="true"] .landing2026CreateArrow { transform: rotate(180deg); }
.landing2026CreatePanel {
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  left: 50%;
  display: grid;
  width: min(430px, calc(100vw - 32px));
  gap: 2px;
  visibility: hidden;
  border: 1px solid rgba(70,61,48,.12);
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 22px 55px rgba(54,48,40,.16);
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  transform: translate(-50%,-7px);
  transform-origin: 50% 0;
  transition: opacity 150ms ease,transform 180ms ease,visibility 0s linear 180ms;
}
.landing2026CreateTrigger[aria-expanded="true"] + .landing2026CreatePanel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%,0);
  transition-delay: 0s;
}
.landing2026CreateItem {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  color: #393631;
  padding: 10px 12px;
  text-decoration: none;
  transition: background-color 150ms ease,color 150ms ease;
}
.landing2026Nav .landing2026CreateItem { white-space: normal; }
.landing2026CreateItem:hover,
.landing2026CreateItem:focus-visible,
.landing2026CreateItem[aria-current="page"] {
  background: #f4eddf;
  color: #176c55;
}
.landing2026CreateIcon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid rgba(70,61,48,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.72);
  color: #278865;
  transition: transform 170ms ease,background-color 170ms ease;
}
.landing2026CreateIcon svg { width: 21px; height: 21px; }
.landing2026CreateItem:hover .landing2026CreateIcon,
.landing2026CreateItem:focus-visible .landing2026CreateIcon {
  background: #fffdf8;
  transform: translateY(-2px);
}
.landing2026CreateCopy { display: grid; min-width: 0; gap: 3px; overflow-wrap: anywhere; text-align: start; }
.landing2026CreateCopy strong { font-size: .84rem; line-height: 1.2; }
.landing2026CreateCopy > span { color: #7a746a; font-size: .74rem; font-weight: 500; line-height: 1.35; }

.landing2026MobileCreate { display: grid; min-width: 0; }
.landing2026MobileCreateTrigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #393631;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: .75rem;
  text-align: start;
  transition: background-color 150ms ease,color 150ms ease;
}
.landing2026MobileCreateTrigger:hover,
.landing2026MobileCreateTrigger:focus-visible { background: #f4eddf; color: #176c55; }
.landing2026MobileCreateTrigger:focus-visible,
.landing2026MobileCreateItem:focus-visible { outline: 3px solid var(--rk-focus-ring); outline-offset: 2px; }
.landing2026MobileCreateTrigger[aria-current="page"] { color: var(--rk-emerald-hover); }
.landing2026MobileCreateTrigger[aria-expanded="true"] .landing2026CreateArrow { transform: rotate(180deg); }
.landing2026MobileCreateClip {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}
.landing2026MobileCreateItems {
  display: grid;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 150ms ease,transform 180ms ease;
}
.landing2026MobileCreateTrigger[aria-expanded="true"] + .landing2026MobileCreateClip { grid-template-rows: 1fr; }
.landing2026MobileCreateTrigger[aria-expanded="true"] + .landing2026MobileCreateClip .landing2026MobileCreateItems {
  opacity: 1;
  transform: translateY(0);
}
.landing2026MobilePanel .landing2026MobileCreateItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .55rem .75rem .55rem 1.25rem;
  transition: background-color 150ms ease,color 150ms ease;
}
.landing2026MobilePanel .landing2026MobileCreateItem:hover,
.landing2026MobilePanel .landing2026MobileCreateItem:focus-visible,
.landing2026MobilePanel .landing2026MobileCreateItem[aria-current="page"] { background: #f4eddf; color: #176c55; }
.landing2026MobileCreateItem .landing2026CreateIcon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
.landing2026MobileCreateItem .landing2026CreateIcon svg { width: 18px; height: 18px; }

/* ── 导航流式适配（2026-07-17,自 home-v3.css 迁入 2026-07-21）：
   同容器 + clamp 间距 + 分级压缩 + 960 折叠;原则:靠间距/折叠适配,绝不缩字号(.87rem 全程不变)。
   注意:home-2026.css 自带 1160 折叠断点,下方 961 段显式压回,统一全站折叠点为 960。── */
.landing2026Nav{gap:clamp(18px,2vw,34px)}
.landing2026Nav a{white-space:nowrap}          /* 菜单项不折行 */
.landing2026HeaderInner{gap:clamp(16px,2vw,28px)}
.landing2026Actions{gap:clamp(10px,1.1vw,18px);flex:none}  /* 右侧操作区不被挤压 */
/* 宽桌面下导航相对整个 Header 居中，不受左右区域宽度差影响。 */
@media (min-width:1320px){
  .landing2026Nav{position:absolute;left:50%;transform:translateX(-50%)}
}
/* 1100 以下逐步压缩间距（字号不动） */
@media (max-width:1100px){
  .landing2026Nav{gap:clamp(13px,1.5vw,20px)}
  .landing2026HeaderInner{gap:14px}
  .landing2026Actions{gap:10px}
}
/* 961-1160 区间：压掉 home-2026.css 的提前折叠，保持桌面导航 */
@media (min-width:961px){
  .landing2026Nav{display:flex}
  .landing2026MobileMenu{display:none}
}
/* 960 以下切移动导航 + 头高 72→64 */
@media (max-width:960px){
  .landing2026Header{height:64px}
  .landing2026Nav{display:none}
  .landing2026MobileMenu{display:block}
  .landing2026MobilePanel{inset-block-start:64px}
}

/* ── 语言选择器：本文件是唯一来源（2026-07-26 合并）─────────────────────────
   九宫格视觉 2026-07-21 建立（对齐 v3 studio）：三列圆角胶囊,当前语种绿描边,移动抽屉降两列。

   ⚠ 曾经这套规则被拆成两半：外壳(定位/最大高/滚动/边框/底色/阴影)留在 home-v3.css 与
   home-2026.css 各一份,只有网格部分写在这里。后果是**面板的样貌取决于样式表加载顺序**——
   两个 /create/* 页把本文件排在 home-v3 之前,于是列数取这里的 3 列、宽度取 home-v3 的 260px,
   三列硬塞进 260px：右列被裁 + 面板内冒出横向滚动条(2026-07-25 修 order,07-26 合并根治)。
   这种"各取一半"最难查——home-v3 没声明 grid-template-columns,所以它并非整段覆盖,只抢走了
   width 那一条,看上去"九宫格明明生效了"。

   所以：**语言选择器的每一条属性都写在这里,不依赖任何加载顺序**。
   home-v3.css / home-2026.css 里对应的块已删除,不要再往那两个文件加语言相关规则。
   （其余 landing2026* 的 chrome 规则目前仍在那两处重复且已漂移,是另一件事,未合并。） */
.landing2026Language{position:relative}
.landing2026Language > summary{
  display:flex;
  min-height:40px;
  align-items:center;
  gap:.45rem;
  border:1px solid rgba(70,61,48,.12);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  cursor:pointer;
  list-style:none;
  padding:.55rem .85rem;
  font-size:.8rem;
  font-weight:700;
}
.landing2026Language > summary::-webkit-details-marker{display:none}
.landing2026LanguagePanel{
  /* 外壳(原 home-v3.css / home-2026.css) */
  position:absolute;
  top:calc(100% + .6rem);
  right:0;
  display:grid;
  max-height:min(480px,70vh);
  overflow:auto;
  border:1px solid rgba(70,61,48,.12);
  background:#fffdf8;
  box-shadow:0 22px 55px rgba(54,48,40,.16);
  /* 九宫格 */
  width:min(560px,calc(100vw - 32px));
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:14px;
  border-radius:20px;
}
.landing2026LanguagePanel a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.55rem .6rem;
  border:1px solid transparent;
  border-radius:14px;
  background:#f4f1e8;
  color:#393631;
  font-size:.85rem;
  font-weight:700;
  text-align:center;
}
.landing2026LanguagePanel a:hover{background:#dff2e9;color:#176c55}
.landing2026LanguagePanel a[aria-current='page']{
  background:#eaf6f0;
  border-color:#2f9d78;
  color:#1d7a5f;
}
/* 抽屉内：面板不再是绝对定位的右对齐下拉,而是随抽屉流式铺开,故 right/left 要显式复位
   （原写在 home-v3.css / home-2026.css,一并搬来）。 */
.landing2026MobilePanel .landing2026Language{margin:.35rem 0}
.landing2026MobilePanel .landing2026LanguagePanel{
  right:auto;
  left:0;
  width:min(100%,560px);
  grid-template-columns:repeat(2,1fr);
}

/* Footer newsletter CTA: needs explicit color:#fff — the shared footer link rule
   (.landing2026Footer a, in both home-v3.css and home-2026.css) darkens anchor text,
   which turns the green button's label near-illegible otherwise. */
.landing2026FooterNewsletter .lp-btn-primary{font-size:14.5px;padding:.7rem 1.3rem;margin-top:.2rem;
  display:inline-flex;color:#fff}
.landing2026FooterNewsletter .lp-btn-primary:hover{color:#fff}

/* ── Shared Header/Footer geometry and readability ──────────────────────────
   home-v3.css is the visual source of truth for the current homepage, while
   secondary LPs load home-2026.css. Keep the final shared chrome values here
   (loaded after either base file) so Hub, detail and Make pages cannot drift. */
.landing2026HeaderInner{
  position:relative;
  width:min(calc(100% - 2*clamp(24px,4vw,72px)),1560px);
}
.landing2026Nav > a{
  border:0;
  border-block-end:1px solid transparent;
  background:transparent;
  color:#393631;
  font:inherit;
  font-size:.87rem;
  font-weight:700;
  padding:6px 0 5px;
  text-decoration:none;
}
.landing2026Nav > a:hover{color:#278865}
.landing2026Nav > a[aria-current="page"]{
  border-block-end-color:currentColor;
  color:var(--rk-emerald-hover);
}
.landing2026Footer{border-top:1px solid rgba(70,61,48,.22);margin-top:0}
.landing2026FooterInner{
  width:min(calc(100% - 2*clamp(24px,4vw,72px)),1560px);
  padding:clamp(50px,4.6vw,68px) 0 1.9rem;
}
.landing2026Footer a{font-size:14.5px;color:#514c43}
.landing2026Footer a:hover{color:#176c55}
.landing2026FooterBrand p,.landing2026FooterNewsletter p{
  color:#565046;
  font-size:14.5px;
  line-height:1.62;
}
.landing2026Footer h2{
  margin:0 0 1rem;
  color:#33302a;
  font-size:15.5px;
  letter-spacing:.02em;
}
.landing2026FooterBottom{
  margin-top:1.15rem;
  color:#8a8378;
  font-size:13px;
}
.landing2026FooterGrid{gap:clamp(1.6rem,2.4vw,2.8rem)}
.landing2026Social{gap:.7rem;margin-top:1rem}
.landing2026Social a{
  width:38px;
  height:38px;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.landing2026Social a:hover{transform:translateY(-2px)}
.landing2026Social a[data-social="facebook"]{color:#1877f2;background:#f1f6ff;border-color:#d9e7ff}
.landing2026Social a[data-social="youtube"]{color:#e62117;background:#fff3f2;border-color:#ffd9d6}
.landing2026Social a[data-social="x"]{color:#111;background:#f5f5f3;border-color:#deddd8}
.landing2026Social svg{width:18px;height:18px}
@media (min-width:1161px){
  .landing2026FooterGrid{grid-template-columns:1.4fr repeat(3,.68fr) 1.62fr}
}

@media (prefers-reduced-motion: reduce) {
  .landing2026CreateArrow,
  .landing2026CreatePanel,
  .landing2026CreateItem,
  .landing2026CreateIcon,
  .landing2026MobileCreateTrigger,
  .landing2026MobileCreateClip,
  .landing2026MobileCreateItems { transition: none; }
}