/* SCG XP Sales Kit — หน้า landing + คู่มือ
   ใช้โทเคนชุดเดียวกับ Customer Desk/Playbook ของพี่คิว เพื่อให้รู้สึกเป็นของชุดเดียวกัน
   ไฟล์นี้เป็นของเรา ไม่เกี่ยวกับ vendor/ แก้ได้อิสระ ไม่มีต้นทุน merge */

:root{
  --bg:#FAF8F7; --surface:#FFFFFF; --surface-2:#F3F0EE;
  --deck:#1B1715; --deck-ink:#F6F3F1; --deck-ink-2:#A79C96;
  --ink:#1A1614; --ink-2:#5E5651; --ink-3:#918884;
  --line:#EAE5E2; --line-2:#DAD3CF;
  --brand:#C8102E; --brand-2:#A80C26; --brand-soft:#FDF1F3;
  --ok:#1F7A4C; --warn:#9A6B08; --warn-soft:#FBF3E2;
  /* ไล่สี 7 สเตจ — ชุดเดียวกับใน Customer Desk */
  --s1:#EBBFC6; --s2:#DE9CA9; --s3:#CE7487; --s4:#C24C66;
  --s5:#C8102E; --s6:#9E0C24; --s7:#6E0A1A;
  --r-s:7px; --r:11px; --r-l:16px;
  --sh-1:0 1px 2px rgba(26,22,20,.05);
  --sh-2:0 1px 2px rgba(26,22,20,.05), 0 4px 12px -4px rgba(26,22,20,.10);
  --wrap:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.7 "IBM Plex Sans Thai",system-ui,sans-serif;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.dsp{font-family:"Bai Jamjuree","IBM Plex Sans Thai",system-ui,sans-serif; font-weight:600; letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.18; margin:0}
h2{font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.3; margin:0 0 .7rem}
h3{font-size:1.02rem; line-height:1.4; margin:0 0 .35rem}
p{margin:0 0 1rem; max-width:64ch}
a{color:var(--brand-2)}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:600; font-feature-settings:"tnum"}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.band{padding:clamp(2.4rem,6vw,4.2rem) 0; border-top:1px solid var(--line)}
.band:first-of-type{border-top:0}
.band.dark{background:var(--deck); color:var(--deck-ink); border-top:0}
.band.dark h2{color:#fff}
.band.dark p{color:var(--deck-ink-2)}

/* ── หัวเว็บ ── */
.top{
  position:sticky; top:0; z-index:20; background:rgba(250,248,247,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line);
}
.top .wrap{display:flex; align-items:center; gap:.7rem; height:60px}
.mark{
  width:32px; height:32px; border-radius:var(--r-s); background:var(--brand); color:#fff;
  display:grid; place-items:center; font-family:"Bai Jamjuree",sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.02em; flex:none;
}
.top b{font-family:"Bai Jamjuree",sans-serif; font-weight:600; font-size:.97rem}
.top .sub{color:var(--ink-3); font-size:.84rem; margin-left:-.2rem}
.top nav{margin-left:auto; display:flex; gap:.4rem}
.top nav a{
  text-decoration:none; color:var(--ink-2); font-size:.9rem; font-weight:500;
  padding:.4rem .75rem; border-radius:var(--r-s); border:1px solid var(--line-2);
}
.top nav a:hover{background:var(--surface); color:var(--ink)}
.top nav a{white-space:nowrap}
.top b{white-space:nowrap}
@media (max-width:560px){
  .top .wrap{gap:.5rem; padding:0 16px}
  .top .sub{display:none}
  .top b{font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .top nav a{padding:.35rem .6rem; font-size:.85rem}
}
@media (max-width:560px){ .wrap{padding:0 16px} }

/* ── ไล่สเตจ 7 ขั้น: องค์ประกอบหลักของหน้า ── */
.ramp{display:flex; align-items:flex-end; gap:4px; margin:0}
.ramp.hero{height:clamp(130px,19vw,215px)}
.ramp .seg{
  flex:1; border-radius:3px 3px 0 0; min-width:0;
  transform-origin:bottom; 
}
.ramp.hero .seg{height:var(--h)}
@media (prefers-reduced-motion:no-preference){
  .ramp.hero .seg{animation:grow .5s cubic-bezier(.2,.8,.3,1) backwards; animation-delay:var(--d)}
  @keyframes grow{from{height:6%; opacity:.25}}
}
.ramp-ends{display:flex; justify-content:space-between; margin-top:.5rem; font-size:.84rem; color:var(--ink-2)}
.ramp-ends b{font-weight:600; color:var(--ink)}

/* ── การ์ดเครื่องมือ ── */
.tools{display:grid; gap:14px; grid-template-columns:1.25fr 1fr}
@media (max-width:760px){ .tools{grid-template-columns:1fr} }
.tool{
  display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-l); padding:1.4rem 1.5rem 1.3rem;
  box-shadow:var(--sh-1); transition:box-shadow .16s, border-color .16s;
}
.tool:hover,.tool:focus-visible{box-shadow:var(--sh-2); border-color:var(--line)}
.tool .when{font-size:.9rem; font-weight:600; color:var(--brand-2); margin-bottom:.15rem}
.tool--lead{border-left:4px solid var(--brand)}
.tool--lead h3{font-size:1.5rem}
.tool h3{margin-bottom:.5rem}
.tool{display:flex; flex-direction:column}
.tool ul{margin:.2rem 0 1rem; padding-left:1.1rem; color:var(--ink-2); font-size:.94rem; line-height:1.65}
.tool li{margin:.1rem 0}
.gate{
  align-self:flex-start; margin-top:auto; display:inline-block; font-size:.8rem; font-weight:600; padding:.22rem .6rem;
  border-radius:100px; border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface-2);
}
.gate.open{color:var(--ok); border-color:#BFDDCB; background:#EEF7F1}

/* ── ขั้นตอนเริ่มใช้ ── */
.steps{display:grid; gap:12px; grid-template-columns:repeat(3,1fr); counter-reset:s}
@media (max-width:720px){ .steps{grid-template-columns:1fr} }
.step{
  border:1px solid rgba(246,243,241,.18); border-radius:var(--r); padding:1rem 1.1rem;
  background:rgba(246,243,241,.04); counter-increment:s;
}
.step::before{
  content:counter(s); display:block; font-family:"IBM Plex Mono",monospace; font-weight:600;
  font-size:.82rem; color:var(--s1); margin-bottom:.3rem;
}
.step b{display:block; font-weight:600; margin-bottom:.15rem; color:#fff}
.step span{color:var(--deck-ink-2); font-size:.92rem; line-height:1.6}

.foot{padding:1.6rem 0 2.6rem; color:var(--ink-3); font-size:.88rem; border-top:1px solid var(--line)}
.foot .warn{color:var(--warn); background:var(--warn-soft); border:1px solid #F0E0BD;
  padding:.6rem .85rem; border-radius:var(--r-s); display:inline-block; margin-bottom:.9rem}

:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:3px}

/* ── สวิตช์บทบาท (เซล / หัวหน้าทีม) — หน้า landing เท่านั้น ──
   ใช้สำนวนเดียวกับสวิตช์ ทีมงาน/ลูกค้า ใน Playbook ของพี่คิว เพื่อให้รู้สึกเป็นของชุดเดียวกัน */
.rolesw{display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; background:var(--surface)}
.rolesw button{
  font:inherit; font-size:.85rem; font-weight:600; line-height:1.2; padding:.42rem .8rem;
  border:0; cursor:pointer; background:transparent; color:var(--ink-3); white-space:nowrap;
}
.rolesw button:hover{color:var(--ink)}
.rolesw button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
@media (max-width:560px){
  .rolesw button{padding:.35rem .6rem; font-size:.8rem}
  .rolesw .pre{display:none}
}
/* จอแคบมาก: ยอมตัดลิงก์คู่มือบนหัวเว็บ (ท้ายหน้ายังมีลิงก์เดิมอยู่) เพื่อให้สวิตช์บทบาทอยู่ครบ */
@media (max-width:360px){ .top nav a{display:none} }
@media (max-width:420px){ .top b{max-width:6.5rem} }

/* สลับเนื้อหาตามบทบาท — ค่าตั้งต้นคือมุมมองเซล
   .pre-lead ถูกใส่ที่ <html> ตั้งแต่ก่อนวาดหน้า กันเนื้อหากระพริบสลับก่อน JS ทำงาน */
[data-role="lead"]{display:none}
.pre-lead [data-role="sale"], body.role-lead [data-role="sale"]{display:none}
.pre-lead [data-role="lead"], body.role-lead [data-role="lead"]{display:revert}

/* ── ปุ่มเข้าใช้งานในการ์ด ──
   ของเดิมการ์ดเป็นลิงก์ทั้งใบแต่ไม่มีอะไรบอกว่ากดได้ คนเปิดครั้งแรกจึงอ่านเป็นกล่องข้อมูลเฉยๆ */
.tool .act{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:auto; padding-top:.2rem}
.go{
  display:inline-block; font-weight:600; font-size:.95rem; padding:.55rem 1.1rem; border-radius:var(--r-s);
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  transition:background .16s, border-color .16s;
}
.go.quiet{background:var(--surface); color:var(--brand-2); border-color:var(--line-2)}
.tool:hover .go,.tool:focus-visible .go{background:var(--brand-2); border-color:var(--brand-2); color:#fff}
.tool:hover,.tool:focus-visible{border-color:var(--brand)}
.tool .act .gate{margin-top:0; align-self:center}