/* หน้ารอง (/download, หน้าแนะนำการใช้งาน, ศูนย์ช่วยเหลือ): โครงหน้าร่วมกับหน้ากฎหมาย (web/templates/layout.html)
 * ใช้ token / ปุ่ม / รายการเลขแบบหมุด (.legend) / FAQ ชุดเดียวกับหน้าแรก ไม่เพิ่มสีหรือฟอนต์ใหม่
 * Hallmark · secondary pages: one display heading per page, hairline cards on --color-panel, accent = kicker + links only */

.page{padding:calc(var(--nav-top) + var(--nav-h) + var(--space-xl)) var(--space-sm) var(--space-2xl)}
@media (min-width: 60rem){ .page{padding-inline:var(--space-lg)} }
.page__kicker{font-size:var(--text-sm);font-weight:600;color:var(--color-accent)}
.page__title{
  margin-top:var(--space-xs);min-width:0;overflow-wrap:anywhere;
  font-size:var(--text-2xl);font-weight:var(--weight-display);line-height:1.1;letter-spacing:-.02em;
}
.page__lede{margin-top:var(--space-md);max-width:var(--measure);font-size:var(--text-lg);line-height:1.5;color:var(--color-ink-2)}
.page__h2{
  min-width:0;overflow-wrap:anywhere;
  font-size:var(--text-xl);font-weight:var(--weight-display);line-height:1.2;letter-spacing:-.015em;
}
.page__fine{margin-top:var(--space-sm);max-width:var(--measure);font-size:var(--text-sm);line-height:1.5;color:var(--color-muted)}
.page__link,.page__links a{
  font-weight:600;color:var(--color-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  border-radius:2px;transition:color var(--dur-fast) var(--ease-out);
}
.page__link:hover,.page__links a:hover{color:var(--color-ink)}
.page__links{display:grid;gap:var(--space-2xs);margin:var(--space-sm) 0 0;padding:0;list-style:none}
.legend li b{font-weight:700;color:var(--color-ink)}

/* ============================================================ /download */

.dl{display:grid;gap:var(--space-2xl);max-width:64rem;margin:0 auto}
.dl__head{min-width:0;max-width:42rem}
.dl__cta{margin-top:var(--space-lg)}
.dl__install,.dl__first{display:grid;gap:var(--space-lg);padding-top:var(--space-xl);border-top:1px solid var(--color-line)}
.dl__install .legend,.dl__first .legend{margin-top:var(--space-md);max-width:var(--measure)}
@media (min-width: 52rem){
  .dl__install{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:var(--space-2xl)}
}
.dl__steps{min-width:0}
.dl__more{display:grid;gap:var(--space-sm)}
@media (min-width: 44rem){ .dl__more{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dl__card{min-width:0;padding:var(--space-md);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-panel)}
.dl__card-title{font-size:var(--text-lg);font-weight:var(--weight-display);line-height:1.25}
.dl__card p{margin-top:var(--space-xs);color:var(--color-ink-2)}

/* ภาพจำลองหน้าต่างเตือนของ Windows (วาดด้วยสีของเว็บ ไม่ใช่ภาพหน้าจอจริง) วงสีเขียว = ที่ต้องกด */
.ss{margin:0;min-width:0}
.ss__win{
  display:grid;gap:var(--space-xs);max-width:26rem;padding:var(--space-md);
  border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-sunken);box-shadow:var(--shadow-card);
}
.ss__title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-lg);line-height:1.25;overflow-wrap:anywhere}
.ss__line{display:block;height:8px;border-radius:4px;background:var(--color-line)}
.ss__line--short{width:62%}
.ss__more{
  justify-self:start;margin-top:var(--space-3xs);font-size:var(--text-sm);font-weight:600;color:var(--color-ink);
  text-decoration:underline;text-underline-offset:3px;border-radius:3px;outline:2px solid var(--color-accent);outline-offset:4px;
}
.ss__btns{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2xs);
  margin-top:var(--space-xs);padding-top:var(--space-sm);border-top:1px solid var(--color-line);
}
.ss__btn{
  display:inline-flex;align-items:center;min-height:32px;padding:0 var(--space-sm);
  border:1px solid var(--color-line);border-radius:6px;font-size:var(--text-sm);line-height:1.2;color:var(--color-ink-2);
}
.ss__btn--go{border-color:var(--color-accent);color:var(--color-ink);box-shadow:0 0 0 3px var(--color-accent-soft)}

/* ============================================================ หน้าแนะนำการใช้งาน (landing) */

.lp{display:grid;gap:var(--space-3xl);max-width:var(--page-max);margin:0 auto}
.lp__hero{display:grid;gap:var(--space-xl);align-items:center}
@media (min-width: 60rem){ .lp__hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:var(--space-2xl)} }
.lp__intro{min-width:0;max-width:38rem}
.lp__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);margin-top:var(--space-lg)}
.lp__shot{
  margin:0;min-width:0;overflow:hidden;
  border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-panel);box-shadow:var(--shadow-shot);
}
.lp__shot img{width:100%;height:auto}
/* ตัวอย่างคำขอในแอป AI (หน้า MCP): ข้อความสมมติ มีป้ายบอกว่าเป็นตัวอย่าง */
.lp__chat{display:grid;gap:var(--space-sm);padding:var(--space-md)}
.lp__chat-label{font-size:var(--text-xs);font-weight:600;color:var(--color-muted)}
.lp__ask,.lp__reply{max-width:min(100%,28rem);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:var(--text-sm);line-height:1.5}
.lp__ask{justify-self:end;background:var(--color-accent-soft);color:var(--color-ink)}
.lp__reply{justify-self:start;border:1px solid var(--color-line);background:var(--color-field);color:var(--color-ink-2)}
.lp__reply .chip__text{color:var(--color-ink);font-weight:600;white-space:normal;overflow-wrap:anywhere}
.lp__section{display:grid;gap:var(--space-lg);padding-top:var(--space-2xl);border-top:1px solid var(--color-line)}
.lp__section .legend{margin-top:0;max-width:var(--measure)}
.feats{display:grid;gap:var(--space-sm);margin:0;padding:0;list-style:none}
@media (min-width: 40rem){ .feats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width: 64rem){ .feats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.feats li{min-width:0;padding:var(--space-md);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-panel)}
.feats__title{font-size:var(--text-md);font-weight:var(--weight-display);line-height:1.3;overflow-wrap:anywhere}
.feats p{margin-top:var(--space-2xs);font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2)}
/* FAQ ใช้ส่วนเดียวกับหน้าแรก แต่ในหน้านี้ไม่ต้องมีขอบซ้ายขวาซ้อนอีกชั้น */
.lp .faq{margin:0;padding:var(--space-2xl) 0 0}
.lp__end{padding:var(--space-lg) var(--space-md);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-panel)}
@media (min-width: 40rem){ .lp__end{padding:var(--space-xl)} }
.lp__end p{margin-top:var(--space-xs);color:var(--color-ink-2)}
.lp__related{padding-top:var(--space-lg);border-top:1px solid var(--color-line-soft)}
.lp__related-title{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--color-muted);letter-spacing:0}
.lp__related ul{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin:var(--space-sm) 0 0;padding:0;list-style:none}
.lp__related a{
  display:inline-flex;align-items:center;min-height:36px;padding:var(--space-3xs) var(--space-sm);
  border:1px solid var(--color-line);border-radius:var(--radius-sm);
  font-size:var(--text-sm);line-height:1.3;color:var(--color-ink-2);text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.lp__related a:hover{border-color:var(--color-accent-line);color:var(--color-ink)}
.lp__related a:active{background:var(--color-sunken)}

/* ============================================================ ศูนย์ช่วยเหลือ (ใช้คอลัมน์อ่านของ legal.css) */

.help-hub{max-width:64rem}
.legal__doc .help-list{display:grid;gap:var(--space-sm);margin-top:var(--space-md);padding:0;list-style:none}
@media (min-width: 44rem){ .legal__doc .help-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.legal__doc .help-list li{margin:0}
.legal__doc .help-card{
  display:grid;align-content:start;gap:var(--space-2xs);height:100%;padding:var(--space-md);
  border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-panel);
  color:var(--color-ink);text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.legal__doc .help-card:hover{border-color:var(--color-accent-line);color:var(--color-ink);transform:translateY(-2px)}
.legal__doc .help-card:active{transform:none;background:var(--color-sunken)}
.help-card__title{font-weight:700;line-height:1.35}
.help-card__text{font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2)}
/* ชื่อเมนู/ปุ่มในแอป: ป้ายพื้นเข้มเล็ก ๆ อ่านแยกจากเนื้อความได้ทันที */
.ui{
  padding:.05em .4em;border-radius:6px;background:var(--color-sunken);color:var(--color-ink);
  font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
kbd{
  display:inline-block;min-width:1.6em;padding:0 .35em;border:1px solid var(--color-line);border-bottom-width:2px;
  border-radius:5px;background:var(--color-panel);color:var(--color-ink);font:inherit;font-size:.9em;font-weight:600;
  line-height:1.45;text-align:center;
}
.help-table{margin:var(--space-sm) 0 0;border-top:1px solid var(--color-line-soft)}
.help-table > div{display:grid;gap:var(--space-3xs);padding:var(--space-xs) 0;border-bottom:1px solid var(--color-line-soft)}
@media (min-width: 40rem){ .help-table > div{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--space-md)} }
.help-table dt{font-weight:600;color:var(--color-ink)}
.help-table dd{margin:0;min-width:0;color:var(--color-ink-2);overflow-wrap:anywhere}
.legal__doc .help-more{padding:0;list-style:none}
.legal__doc .help-more li+li{margin-top:var(--space-2xs)}