/* ============================================================
   V2 奶油文艺 —— 参考 sudowrite.com
   配色：奶油纸底 #f6f1e4 / 墨棕文字 / 彩色accent词（蓝、品红、朱砂）
   字体：衬线大标题（Georgia/宋体）+ 衬线正文，斜体点缀
   间距：超大留白、居中hero、胶囊按钮、呼吸感最强的一版
   ============================================================ */
:root {
  --cream: #f6f1e4;
  --cream-deep: #efe7d3;
  --cream-card: #fbf7ec;
  --ink: #2d2820;
  --sub: #6f675a;
  --faint: #a39a89;
  --blue: #2f7fd1;
  --magenta: #c13fb4;
  --vermilion: #c24a35;
  --green: #35a25a;
  --green-deep: #2b8a4c;
  --line: #e0d6bf;
  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px; line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 32px; }

.demo-banner {
  background: var(--ink); color: var(--cream);
  text-align: center; font-size: 12px; letter-spacing: 0.14em;
  padding: 8px 16px; font-family: var(--sans);
}

/* 导航：极简、小字、无下划线 */
header.site {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .mark { font-size: 24px; font-weight: 700; letter-spacing: 0.04em; }
.brand .tag { font-size: 12px; color: var(--faint); font-style: italic; }
nav.site { display: flex; align-items: center; gap: 30px; font-size: 14px; font-family: var(--sans); }
nav.site a { color: var(--sub); transition: color 0.2s; }
nav.site a:hover { color: var(--ink); }
nav.site a.active { color: var(--ink); font-weight: 600; }
nav.site a.nav-pill {
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 8px 22px; color: var(--ink); font-weight: 600;
  transition: all 0.2s;
}
nav.site a.nav-pill:hover { background: var(--ink); color: var(--cream); }

/* Hero：Sudowrite式居中超大衬线标题 + 彩色词 */
.hero { text-align: center; padding: 40px 0 48px; }
.hero-eyebrow {
  display: inline-block; font-family: var(--sans); font-size: 13px;
  color: var(--sub); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 18px; margin-bottom: 20px; background: var(--cream-card);
}
.hero h1 {
  font-size: 44px; line-height: 1.28; font-weight: 700;
  letter-spacing: 0.01em; max-width: 840px; margin: 0 auto 18px;
}
.hero h1 .c-blue { color: var(--blue); font-style: italic; }
.hero h1 .c-magenta { color: var(--magenta); font-style: italic; }
.hero h1 .c-vermilion { color: var(--vermilion); font-style: italic; }
.hero .sub {
  font-size: 16px; font-style: italic; color: var(--sub);
  max-width: 620px; margin: 0 auto 26px;
}
.dims { display: flex; gap: 14px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }
.dims span {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 8px 20px 7px; background: var(--cream-card);
}
.dims b { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.dims i { font-style: normal; font-size: 11px; color: var(--faint); line-height: 1.4; }
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 15px 36px; border-radius: 999px;
  font-size: 16px; font-weight: 600; border: none; cursor: pointer;
  font-family: var(--sans); transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 10px 26px rgba(53,162,90,0.3); }
.btn-primary:hover { background: var(--green-deep); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

/* 原则：手写便签感横排 */
.principles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 0 0 56px;
}
.principle {
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px 22px; text-align: center;
  transition: transform 0.25s;
}
.principle:hover { transform: translateY(-4px) rotate(-0.5deg); }
.principle .p-t { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.principle .p-t em { font-style: italic; color: var(--vermilion); }
.principle .p-d { font-size: 14px; color: var(--sub); font-family: var(--sans); line-height: 1.8; }

/* 栏目 */
.columns { padding: 0 0 72px; }
.section-head { text-align: center; margin-bottom: 30px; }
.section-head h2 { font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.section-head h2 em { font-style: italic; color: var(--blue); }
.section-head .hint { font-size: 14px; color: var(--faint); font-style: italic; }
.tabs { display: flex; gap: 12px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.tab {
  font-family: var(--sans); font-size: 14px;
  padding: 10px 26px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--cream-card); color: var(--sub);
  transition: all 0.2s;
}
.tab.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tab:hover:not(.active) { border-color: var(--ink); color: var(--ink); }
.col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-card {
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 20px; padding: 32px 28px;
  transition: transform 0.25s, box-shadow 0.25s;
}
.article-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(45,40,32,0.1); }
.article-card .kind {
  display: inline-block; font-size: 12px; font-family: var(--sans);
  color: var(--vermilion); border: 1px solid #e8c4bb; border-radius: 999px;
  padding: 4px 14px; margin-bottom: 18px;
}
.article-card h4 { font-size: 19px; font-weight: 700; line-height: 1.6; margin-bottom: 12px; }
.article-card p { font-size: 14px; color: var(--sub); font-family: var(--sans); margin-bottom: 20px; }
.article-card .meta {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--faint); font-family: var(--sans);
  border-top: 1px dashed var(--line); padding-top: 14px;
}
.mock-flag { color: var(--faint); background: var(--cream-deep); padding: 2px 10px; border-radius: 999px; font-size: 11px; }

footer.site {
  border-top: 1px solid var(--line); padding: 40px 0 48px;
  font-size: 13px; color: var(--faint); font-family: var(--sans);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

/* ===== 报告页：杂志式 ===== */
.report-head { text-align: center; padding: 64px 0 44px; border-bottom: 1px solid var(--line); }
.report-head .work { font-size: 38px; font-weight: 700; margin-bottom: 16px; }
.report-head .meta {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  font-size: 13px; color: var(--sub); font-family: var(--sans); align-items: center;
}
.report-head .meta span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; background: var(--cream-card); }
.report-section { padding: 52px 0; border-bottom: 1px solid var(--line); }
.report-section h2 { font-size: 30px; font-weight: 700; margin-bottom: 28px; }
.report-section h2 em { font-style: italic; color: var(--magenta); }
.understanding {
  font-size: 17px; line-height: 2.1; padding: 8px 0 0 28px;
  border-left: 3px solid var(--vermilion);
}
.understanding::first-letter { font-size: 1.6em; color: var(--vermilion); }
.point { background: var(--cream-card); border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px; margin-bottom: 20px; }
.point .p-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.point h4 { font-size: 20px; font-weight: 700; }
.quote {
  padding: 20px 24px; margin: 18px 0; font-size: 16px; font-style: italic;
  background: var(--cream-deep); border-radius: 14px; line-height: 1.9;
}
.quote .loc { display: block; font-style: normal; font-family: var(--sans); font-size: 11px; color: var(--blue); margin-top: 10px; }
.why { font-size: 15px; color: var(--sub); font-family: var(--sans); line-height: 1.85; }
details.point { padding: 0; }
details.point summary { list-style: none; cursor: pointer; padding: 24px 32px; }
details.point summary::-webkit-details-marker { display: none; }
details.point .quote, details.point .why { margin-left: 32px; margin-right: 32px; }
details.point .why { padding-bottom: 26px; }
.fold-hint { font-size: 12px; color: var(--faint); font-family: var(--sans); white-space: nowrap; }
details[open] .fold-hint { color: var(--vermilion); }
.tradeoff { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.option-card { border: 1px solid var(--line); border-radius: 20px; padding: 32px; background: var(--cream-card); }
.option-card.recommended { border: 2px solid var(--green); box-shadow: 0 14px 34px rgba(53,162,90,0.14); }
.option-card .o-tag {
  display: inline-block; font-size: 12px; font-family: var(--sans); font-weight: 600;
  padding: 5px 16px; border-radius: 999px; margin-bottom: 16px;
  background: var(--cream-deep); color: var(--sub);
}
.option-card.recommended .o-tag { background: #e2f1e7; color: var(--green-deep); }
.option-card h4 { font-size: 21px; font-weight: 700; margin-bottom: 14px; }
.option-card ul { padding-left: 20px; font-size: 14px; color: var(--sub); font-family: var(--sans); margin-bottom: 18px; }
.option-card li { margin-bottom: 8px; }
.option-card .cost {
  font-size: 13px; color: var(--ink); background: var(--cream-deep);
  border-radius: 12px; padding: 14px 18px; font-family: var(--sans);
}
.feedback-box textarea {
  width: 100%; min-height: 120px; resize: vertical;
  border: 1.5px solid var(--line); border-radius: 18px;
  padding: 20px 22px; font-family: var(--sans); font-size: 14px; line-height: 1.8;
  margin-bottom: 16px; background: var(--cream-card); color: var(--ink);
}
.feedback-box textarea:focus { outline: none; border-color: var(--green); }
.feedback-box .row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.feedback-box .note { font-size: 12px; color: var(--faint); font-family: var(--sans); }

.modal-mask {
  position: fixed; inset: 0; background: rgba(45,40,32,0.45);
  display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-mask.show { display: flex; }
.modal { background: var(--cream); border-radius: 24px; padding: 40px; max-width: 450px; margin: 20px; border: 1px solid var(--line); }
.modal h3 { font-size: 24px; font-weight: 700; margin-bottom: 14px; }
.modal p { font-size: 14px; color: var(--sub); font-family: var(--sans); margin-bottom: 26px; }
.modal .row { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero h1 { font-size: 32px; }
  .hero { padding: 28px 0 36px; }
  .principles, .col-grid { grid-template-columns: 1fr 1fr; }
  .tradeoff { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .principles, .col-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 26px; }
  /* 390px紧凑头部：品牌与导航单行，不逐字竖排 */
  header.site { padding: 10px 0; gap: 10px; }
  .brand { flex: 0 0 auto; }
  .brand .mark { font-size: 19px; }
  .brand .tag { display: none; }
  nav.site { gap: 12px; font-size: 12.5px; flex-wrap: nowrap; white-space: nowrap; }
  nav.site a.nav-pill { padding: 6px 13px; }
  .wrap { padding: 0 18px; }
  .hero { padding: 24px 0 32px; }
  .hero-eyebrow { margin-bottom: 14px; font-size: 12px; }
  .hero .sub { font-size: 14px; margin-bottom: 20px; }
  .dims { gap: 8px; margin-bottom: 20px; }
  .dims span { padding: 6px 12px 5px; }
  .btn { padding: 12px 24px; font-size: 14px; }
  .principles { padding-bottom: 40px; gap: 12px; }
  .columns { padding-bottom: 48px; }
  .section-head h2 { font-size: 24px; }
}
/* CSP合规工具类：替代内联样式 */
.hidden{display:none!important}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.flush{border-bottom:none!important}

/* Preserve the accepted portal composition; add only small functional entries. */
.landing-page .btn-primary { background: var(--ink); box-shadow: none; }
.landing-page .btn-primary:hover { background: var(--sub); }
.landing-page nav.site .contact-nav { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.landing-page header.site { gap: 20px; flex-wrap: wrap; }
.landing-page nav.site { gap: 20px; flex-wrap: wrap; }
.hero-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; font: 13px/1.5 var(--sans); color: var(--ink); }
.hero-links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream-card); text-decoration: none; transition: background-color .18s, border-color .18s, color .18s; }
.hero-links a:hover { background: var(--cream-deep); border-color: var(--sub); }
.hero-links svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-links .invite-action { background: var(--entry-clay); border-color: var(--entry-clay); color: #fff; font-weight: 600; }
.hero-links .invite-action:hover { background: var(--entry-clay-hover); border-color: var(--entry-clay-hover); }
@media(prefers-reduced-motion:reduce) { .hero-links a { transition: none; } }
.team-contact { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 36px; margin-bottom: 48px; padding: 32px 0; border-block: 1px solid var(--line); scroll-margin-top: 24px; }
.contact-copy h2 { font-size: 26px; line-height: 1.5; margin-bottom: 12px; text-wrap: balance; }
.contact-copy p { max-width: 48ch; font-family: var(--sans); color: var(--sub); }
.contact-note { font: 13px/1.7 var(--sans); color: var(--sub); margin-top: 10px; }
.contact-note a,.contact-feedback { text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }
.contact-wechat { display: flex; flex-direction: column; align-items: flex-start; }
.contact-label { font: 13px/1.7 var(--sans); color: var(--sub); }
.wechat-id { font-family: var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; user-select: all; }
.contact-wechat .wechat-id { font-size: 27px; line-height: 1.5; margin: 2px 0 12px; }
.contact-copy-button { background: var(--ink); color: var(--cream); padding: 11px 24px; min-height: 44px; font-size: 14px; }
.contact-copy-button:hover { background: var(--sub); }
.contact-copy-button[hidden] { display: none; }
.contact-feedback { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font: 13px/1.6 var(--sans); }
.feedback-contact { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-block: 1px solid var(--line); padding: 24px 0; margin: 24px 0; }
.feedback-contact h2 { font-size: 21px; margin-bottom: 6px; }
.feedback-contact p { font-family: var(--sans); color: var(--sub); }
.feedback-contact .wechat-id { color: var(--ink); }
.landing-page a:focus-visible,.contact-copy-button:focus-visible,.feedback-contact a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media(max-width:680px) {
  .team-contact { grid-template-columns: minmax(0,1fr); gap: 22px; margin-bottom: 32px; padding: 26px 0; }
  .contact-copy h2 { font-size: 23px; }
  .contact-wechat { align-items: flex-start; }
  .feedback-contact { align-items: flex-start; flex-direction: column; }
  .landing-page .cta-row { gap: 12px; }
  .landing-page .hero-links { gap: 8px; }
  .landing-page nav.site { gap: 8px 16px; }
}
.brand .learning-entry { font:12px/1.4 var(--sans); border:1px solid var(--line); border-radius:999px; padding:7px 11px; color:var(--ink); white-space:nowrap; }
.article-card h4 a:hover { text-decoration:underline; text-underline-offset:4px; }
.article-card a:focus-visible,.learning-entry:focus-visible,.tab:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.content-flag { color:var(--sub); background:var(--cream-deep); padding:2px 10px; border-radius:999px; font-size:11px; white-space:nowrap; }
.article-card { display:flex; flex-direction:column; }
.article-card .meta { margin-top:auto; color:var(--sub); }
#home-content-status { text-align:center; color:var(--sub); font-family:var(--sans); margin-bottom:18px; }
@media(max-width:560px) { nav.site .secondary-nav { display:none; } .brand .learning-entry{font-size:11px;padding:8px;min-height:36px;display:inline-flex;align-items:center} .brand{gap:7px} nav.site{gap:9px} }
@media(prefers-reduced-motion:reduce) { .article-card,.principle,.btn,.tab { transition:none; } html{scroll-behavior:auto} }
@media(max-width:560px) {
  header.site { flex-wrap:wrap; }
  header.site > .brand { width:100%; flex-wrap:wrap; }
  nav.site { flex-wrap:wrap; }
  nav.site a { display:inline-flex; align-items:center; min-height:44px; }
}

/* Core entry hierarchy: preserve the portal, make both author tasks visible. */
.landing-page { --entry-green: #285d46; --entry-green-hover: #1e4735; --entry-clay: #9b5039; --entry-clay-hover: #7e3e2b; }
.landing-page nav.site .nav-review { color: var(--ink); font-weight: 600; }
.landing-page nav.site a.nav-pill { display: inline-flex; align-items: center; min-height: 44px; }
.landing-page nav.site a.nav-pill,
.landing-page .btn-writing { background: var(--entry-green); border: 1.5px solid var(--entry-green); color: #fff; box-shadow: none; }
.landing-page nav.site a.nav-pill:hover,
.landing-page .btn-writing:hover { background: var(--entry-green-hover); border-color: var(--entry-green-hover); color: #fff; }
.landing-page .entry-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 620px; margin-inline: auto; gap: 24px; }
.entry-action { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.entry-action .btn { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 15px 24px; font-size: 17px; line-height: 1.5; }
.entry-note { margin: 0; font: 12px/1.6 var(--sans); color: var(--sub); }
@media(max-width:560px) {
  .landing-page .entry-actions { grid-template-columns: minmax(0,1fr); max-width: 340px; gap: 16px; }
  .entry-action { gap: 6px; }
  .entry-action .btn { min-height: 56px; font-size: 16px; }
}

/* Paper, forest and terracotta: keep actions distinct within the existing page. */
.landing-page nav.site .contact-nav{color:var(--entry-clay);text-decoration:none}
.landing-page nav.site .contact-nav:hover{text-decoration:underline;text-underline-offset:5px}
.landing-page .dims i{color:var(--sub)}
/* Public navigation keeps the established cream, ink, blue and vermilion palette. */
header.site{gap:24px;align-items:center;flex-wrap:wrap}nav.site{gap:20px;flex-wrap:wrap;justify-content:flex-end}nav.site a{min-height:44px;display:inline-flex;align-items:center}nav.site [hidden]{display:none!important}.brand{flex-wrap:wrap;gap:12px}.brand .learning-entry{font-size:13px}
.service-entry{display:grid;grid-template-columns:minmax(0,1.4fr) 1fr 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--sans)}.service-entry strong{font-family:var(--serif);font-size:22px;font-weight:500}.service-entry p{color:var(--sub);font-size:14px;line-height:1.7;margin-top:8px}.service-entry>a{align-self:center;font-size:17px;font-weight:600;min-height:54px}.service-entry>a span{display:block;color:var(--sub);font-weight:400;font-size:13px;margin-top:7px}.service-entry a:hover{text-decoration:underline;text-underline-offset:4px}nav.site a:focus-visible,.service-entry a:focus-visible{outline:2px solid var(--vermilion);outline-offset:5px}
@media(max-width:1100px){header.site{display:block}.brand{margin-bottom:18px}nav.site{justify-content:flex-start;gap:10px 22px}.service-entry{grid-template-columns:1fr 1fr}.service-entry>div{grid-column:1/-1}}
@media(max-width:600px){nav.site{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;font-size:14px}nav.site .nav-pill{padding:8px 10px;justify-content:center;grid-column:span 2}.brand .learning-entry{display:none}nav.site .nav-secondary{display:none}.service-entry{gap:20px;font-size:14px}.service-entry>a{font-size:16px}.service-entry>div strong{font-size:21px}}

/* Keep product introduction first; account services follow the contact section. */
.service-entry{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));margin-top:26px}.service-entry>div p a{display:block;margin-top:8px;text-decoration:underline;text-underline-offset:4px}.service-entry [hidden]{display:none!important}@media(max-width:1100px){.service-entry{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){nav.site{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:12px}nav.site .nav-pill{padding:9px 24px}nav.site .nav-secondary{display:inline-flex}.service-entry{grid-template-columns:1fr}.service-entry>div{grid-column:auto}.service-entry>a{border-top:1px solid var(--line);padding-top:16px}}