/* ============================================================
   /how-it-works — เราทำงานยังไง (เลื่อนลงทีละขั้น · แผงตัวเลขข้างเปลี่ยนตามขั้น) · v0.2
   โหลดต่อท้าย quiet-precision.css?v=0.2 + deeptech.css?v=0.1 · ใช้ตัวแปร --qp-* เท่านั้น · คลาสเฉพาะหน้าขึ้นต้น h-
   ============================================================ */

.dt [hidden] { display: none !important; }

/* บทเปิด */
.h-bg { width: 100%; height: 100%; display: block; }
.h-hero__say { margin-top: 24px; font-size: clamp(18px, 1.8vw, 24px); color: var(--qp-ink); }

/* 5 ขั้น · แผงข้างติดจอ (บทนี้ต้อง overflow: visible ไม่งั้น sticky ติดกับกล่องบทแทนหน้าจอ) */
.h-steps { overflow: visible; padding-top: clamp(40px, 6vh, 72px); }
.h-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.h-panel { position: sticky; top: 96px; align-self: start; }
.h-panel__in { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.h-panel__no { display: flex; align-items: baseline; gap: 10px; }
.h-panel__no .dt-num { font-size: clamp(88px, 9vw, 140px); line-height: .9; color: var(--qp-ink); }
.h-panel__no small.dt-num { font-size: var(--qp-t-20); color: var(--qp-faint); letter-spacing: 0; white-space: nowrap; }
.h-panel__name { font-size: var(--qp-t-24); font-weight: 600; color: var(--qp-ink); }
.h-ticks { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.h-ticks li { height: 2px; background: var(--qp-line-strong); transition: background var(--qp-d-3) var(--qp-ease); }
.h-ticks li.is-on { background: var(--qp-green); }
.h-panel__facts { min-height: 120px; }
.h-panel__facts .h-facts { margin-top: 0; }
.h-panel__facts .h-facts > div { padding: 10px 0; }
.h-panel__facts .h-facts dd .dt-num { font-size: var(--qp-t-24); }

.h-list { list-style: none; padding: 0; margin: 0; }
.h-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px 0; border-top: 1px solid var(--qp-line); transition: opacity var(--qp-d-3) var(--qp-ease); }
.h-step:first-child { border-top: 0; }
.h-step .dt-title { font-size: clamp(30px, 3.6vw, 52px); }
.h-step .dt-go { align-self: flex-start; margin-top: 4px; }
.h-js .h-step { opacity: .35; }
.h-js .h-step.is-on { opacity: 1; }

/* ตัวเลขของแต่ละขั้น (อยู่ในขั้นที่เดียว · แผงข้างคัดลอกไปโชว์) */
.h-facts { margin: 6px 0 0; border-top: 1px solid var(--qp-line); }
.h-facts > div { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--qp-line); }
.h-facts dt { font-size: var(--qp-t-13); color: var(--qp-muted); }
.h-facts dd { margin: 0; font-size: var(--qp-t-15); color: var(--qp-ink-2); }
.h-facts dd .dt-num { font-size: var(--qp-t-24); color: var(--qp-ink); letter-spacing: -.02em; margin-right: 4px; }
.h-facts__tag dd { font-size: var(--qp-t-12); color: var(--qp-muted); }
.h-facts--set { border-top-color: color-mix(in srgb, var(--qp-gold) 40%, transparent); }

/* หนึ่งวันของห้องปลูก */
.h-day__tag { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: var(--qp-t-13); color: var(--qp-muted); }
.h-clock { display: grid; grid-template-columns: 16fr 8fr; height: 44px; margin: 36px 0 8px; border: 1px solid var(--qp-line); }
.h-clock__light, .h-clock__dark { display: flex; align-items: center; padding: 0 14px; }
.h-clock__light { background: linear-gradient(90deg, color-mix(in srgb, var(--qp-gold) 10%, transparent), color-mix(in srgb, var(--qp-gold) 22%, transparent) 50%, color-mix(in srgb, var(--qp-gold) 10%, transparent)); border-right: 1px solid var(--qp-line-strong); }
.h-clock__light .dt-label { color: var(--qp-gold); }
.h-clock__dark { background: var(--qp-surface); }
.h-day__rows { margin-top: 24px; }
.h-day__rows .dt-row { grid-template-columns: 140px minmax(0, 1fr); padding: 18px 0; }
.h-day__rows p { color: var(--qp-ink-2); }
.h-day__rows p b { color: var(--qp-ink); font-weight: 600; margin-right: 8px; }
.h-note { margin-top: 18px; font-size: var(--qp-t-13); color: var(--qp-muted); }

/* ── มือถือ / จอแคบ: ไม่มีแผงข้าง → ตัวเลขอยู่ในขั้นของมันเอง ── */
@media (max-width: 900px) {
  .h-grid { grid-template-columns: minmax(0, 1fr); }
  .h-panel { display: none; }
  .h-js .h-step { opacity: 1; }
  .h-step { min-height: 0; padding: 56px 0; }
}
@media (min-width: 901px) {
  .h-list .h-facts { display: none; }   /* จอกว้าง: ตัวเลขโชว์ที่แผงข้าง (ไม่มี JS = โชว์ในขั้นตามเดิม) */
  html:not(.h-js) .h-list .h-facts { display: block; }
}
@media (max-width: 560px) {
  .h-hero .dt-mega { font-size: clamp(48px, 17vw, 80px); }
  .h-facts > div { grid-template-columns: minmax(0, 1fr); }
  .h-day__rows .dt-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .h-hero .dt-actions .dt-btn { flex: 1 1 140px; }
}

/* ── คอมแพค (10 ต.ค. 2569 · ใช้ตัวแปร --dt-* จาก deeptech.css v0.2) · ขั้นไม่บังคับสูงเกือบเต็มจอ ── */
.h-grid { gap: var(--dt-gap); }
.h-panel__no .dt-num { font-size: var(--dt-fs-num-xl); }
.h-step { min-height: 44vh; gap: var(--dt-stack); padding: 32px 0; }
.h-step .dt-title { font-size: var(--dt-fs-title); }
@media (max-width: 560px) {
  .h-hero .dt-mega { font-size: clamp(32px, 11vw, 52px); }
}