/* Marketing shell: header, hero, flow, deliverables, pricing, FAQ, footer. */
.mk-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.mk-header__inner { display: flex; align-items: center; gap: var(--s-5); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand svg, .brand .brand__mark { width: 30px; height: 30px; object-fit: contain; }
.brand__dot { color: var(--terra); }
.mk-nav { display: flex; gap: var(--s-4); margin-inline-start: auto; align-items: center; }
/* 只给页头主链接上色。语言切换是 .mk-nav 里嵌套的 <a>，用后代选择器会被这条规则
   一起染成 --ink-2；同特异性下它又后加载，会把选中项“深色底 + 深色字”压得看不见。 */
.mk-nav > a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: var(--size-sm); font-weight: 500; }
.mk-nav > a:not(.btn):hover { color: var(--terra); }
/* .lang-switch 本体在 components.css（四个壳共用），这里只处理页头内侧的间距。 */
.mk-header .lang-switch { margin-inline-start: var(--s-3); }
/* 只收起文字导航，语言切换是子元素（span.lang-switch），不能被一起隐藏。 */
@media (max-width: 900px) { .mk-nav > a:not(.btn) { display: none; } }
/* 390px 上品牌 + 语言切换 + 两个按钮会顶出屏幕（英文“Start writing”被裁掉一半），
   小屏只留主 CTA：登录入口在首屏表格下方与页脚里都还有。 */
@media (max-width: 560px) {
  .mk-header__inner { gap: var(--s-2); }
  .mk-nav { gap: var(--s-2); }
  .mk-header .lang-switch { margin-inline-start: 0; }
  .mk-nav > a.btn--ghost { display: none; }
  .brand { font-size: 18px; }
  .brand svg, .brand .brand__mark { width: 26px; height: 26px; }
}

.hero { padding: var(--s-9) 0 var(--s-7); border-bottom: 1px solid var(--line); }
.hero h1 { max-width: 18ch; }
.hero h1 em { font-style: normal; color: var(--terra); }
.hero .lede { margin-top: var(--s-4); }
.hero__grid { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); } .hero { padding-top: var(--s-7); } }

.start-box { margin-top: var(--s-6); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); display: grid; gap: var(--s-3); }
.start-box__row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.start-box .input { flex: 1 1 320px; min-width: 0; }
.start-box__meta { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--size-xs); color: var(--muted); }

.hero__aside { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s-5); }
.hero__aside h2 { font-size: var(--size-lg); margin-bottom: var(--s-3); }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.spec-list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-2); font-size: var(--size-sm); color: var(--ink-2); }
.spec-list svg { color: var(--ok); margin-top: 2px; }

.section { padding: var(--s-8) 0; border-bottom: 1px solid var(--line); }
.section__head { display: grid; gap: var(--s-3); max-width: 62ch; margin-bottom: var(--s-6); }
.section__head h2 { font-size: clamp(26px, 3vw, 40px); }

.flow { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.flow__step { padding: var(--s-6); border-inline-end: 1px solid var(--line); display: grid; gap: var(--s-2); align-content: start; }
.flow__step:last-child { border-inline-end: 0; }
.flow__no { font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: var(--tracking-caps); color: var(--terra); }
.flow__step h3 { font-size: var(--size-lg); }
.flow__step p { font-size: var(--size-sm); color: var(--ink-2); margin: 0; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } .flow__step { border-inline-end: 0; border-bottom: 1px solid var(--line); } .flow__step:last-child { border-bottom: 0; } }

.deliverables { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.deliverable { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); background: var(--surface); display: grid; gap: var(--s-2); }
.deliverable h3 { font-size: var(--size-base); font-family: var(--font-sans); font-weight: 700; }
.deliverable p { font-size: var(--size-sm); color: var(--ink-2); margin: 0; }
.deliverable__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); color: var(--muted); text-transform: uppercase; }

.pricing { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.price-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); background: var(--surface); display: grid; gap: 6px; align-content: start; }
/* 价格卡就是购买入口：整张卡可点，悬停时给出松绿色反馈。 */
.price-card--link { color: inherit; text-decoration: none; transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease); }
.price-card--link:hover { border-color: var(--pine); background: var(--pine-soft); }
.price-card__cta { margin-top: var(--s-2); font-size: var(--size-xs); font-weight: 700; color: var(--pine); }
.price-card--link:hover .price-card__cta { text-decoration: underline; }
.price-card--feature { border-color: var(--pine); background: var(--pine); color: var(--pine-ink); }
.price-card--feature .caption, .price-card--feature .muted { color: var(--pine-soft); }
.price-card .price { font-size: 30px; }
.price-card ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--size-sm); }

/* Invite band: one short rule plus one call to action, between pricing and FAQ. */
.invite-band { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-6); border: 1px solid var(--pine); border-radius: var(--r-md); background: var(--pine-soft); }
.invite-band__copy { display: grid; gap: var(--s-2); }
.invite-band__copy h2 { font-size: clamp(24px, 2.6vw, 34px); }
.invite-band__copy .lede { margin: 0; }
.invite-band .btn { flex: none; }
@media (max-width: 720px) { .invite-band { flex-direction: column; align-items: flex-start; gap: var(--s-4); } }

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4) 0;
  display: flex; justify-content: space-between; gap: var(--s-4);
  font-weight: 600; font-size: var(--size-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--terra); }
.faq details[open] summary::after { content: '–'; }
.faq p { padding-bottom: var(--s-4); color: var(--ink-2); font-size: var(--size-sm); max-width: 70ch; }

.mk-footer { padding: var(--s-7) 0 var(--s-6); }
.mk-footer__grid { display: grid; gap: var(--s-5); grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
.mk-footer h4 { font-family: var(--font-sans); font-size: var(--size-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.mk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--size-sm); }
.mk-footer a { color: var(--ink-2); text-decoration: none; }
.mk-footer a:hover { color: var(--terra); }
.mk-footer__legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; font-size: var(--size-xs); color: var(--muted); }
@media (max-width: 860px) { .mk-footer__grid { grid-template-columns: 1fr 1fr; } }

/* Legal pages reuse the marketing shell */
.legal { padding: var(--s-8) 0; }
.legal h1 { font-size: clamp(30px, 4vw, 46px); }
.legal h2 { margin-top: var(--s-6); font-size: var(--size-lg); }
.legal h3 { margin-top: var(--s-5); font-family: var(--font-sans); font-size: var(--size-base); }
.legal p, .legal li { color: var(--ink-2); font-size: var(--size-sm); line-height: 1.7; }
.legal ul { padding-inline-start: var(--s-5); }
.legal__meta { margin: var(--s-3) 0 var(--s-5); font-family: var(--font-mono); font-size: var(--size-xs); color: var(--muted); }
.legal-page { max-width: 72ch; padding-bottom: var(--s-7); }
.legal-page p { color: var(--ink-2); }
.legal-page a { color: var(--pine); }

/* ---------- 弹层、表单、价格块 ---------- */