/* SB hero: campaign artwork and readable HTML copy. */
.sb-home-hero{padding:0;background:var(--ci-paper);max-width:100%;overflow:hidden;scroll-margin-top:0}
.sb-hero-stage{display:grid;isolation:isolate;min-width:0}
.sb-hero-panel{grid-area:1/1;display:grid;position:relative;min-width:0;min-height:600px;visibility:hidden;opacity:0;transition:opacity .35s ease}
.sb-hero-panel.is-active{visibility:visible;opacity:1;z-index:1}
.sb-hero-picture{display:block;position:absolute;inset:0 0 0 32%;z-index:-2}
.sb-hero-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:right top}
.sb-hero-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ci-paper) 0%,var(--ci-paper) 32%,#f1f8ff80 48%,transparent 65%)}
.sb-hero-copy{width:100%;max-width:1360px;margin:auto;padding:48px clamp(24px,4vw,64px);min-width:0}
.sb-hero-brand{font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--blue-800);margin:0 0 20px}
.sb-hero-copy h2{max-width:58%;margin:0;color:var(--navy-950);font-size:clamp(2.3rem,3.7vw,3.45rem);line-height:1.23;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.sb-hero-copy h2>span,.hero-desktop-heading>span,.hero-documents>span{display:block}
/* แต่ละบรรทัดหัวข้อปกออกแบบมาให้อยู่บรรทัดเดียว ห้ามตัดคำ (31 ต.ค. 69)
   เจอตอนจอ 1440px: "รูปแบบการชำระ" ถูกตัดเป็น 2 บรรทัด กลายเป็นหัวข้อ 4 บรรทัด
   ตัวอักษรย่อตามความกว้างจออยู่แล้ว (clamp vw) จึงไม่ล้นขอบ */
.sb-home-hero .hero-desktop-heading>span{white-space:nowrap}
.sb-hero-copy h2>.hero-mobile-heading{display:none}
.sb-hero-copy .hero-subline{font-size:.82em;margin-top:.1em}
.sb-hero-copy .hero-emphasis{color:var(--ci-teal);font-size:1.16em;margin-top:.12em}
.sb-hero-copy .hero-documents{font-size:.83em}
.sb-hero-description{color:var(--ci-teal);max-width:42%;font-size:1.125rem;margin:24px 0 0;line-height:1.6}
.sb-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:49%;margin-top:28px}
.sb-hero-products{font-size:1rem;padding:12px 20px;min-height:52px;text-decoration:none;font-weight:700;text-align:center;border-radius:14px}
.sb-hero-products{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ci-accent);color:var(--ci-deep)}
.sb-hero-footer{padding:16px clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1360px;margin:auto}
.sb-hero-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}
.sb-hero-controls[hidden]{display:none}
.sb-hero-controls button{border:1px solid transparent;min-width:44px;min-height:44px;padding:6px;background:transparent;color:var(--navy-900);cursor:pointer;font:inherit;border-radius:10px}
.sb-hero-controls button:hover{background:var(--ci-paper)}
.sb-hero-controls .sb-hero-prev,.sb-hero-controls .sb-hero-next{font-size:1.25rem}
.sb-hero-dots{display:flex}
.sb-hero-dot span{display:block;width:8px;height:8px;background:var(--ci-accent);border-radius:8px;margin:auto;transition:width .2s}
.sb-hero-dot[aria-pressed="true"] span{width:24px;background:var(--blue-800)}
.sb-hero-controls .sb-hero-pause{font-size:.8rem;margin-left:6px;min-width:80px;border-color:var(--ci-mint)}
.sb-hero-note{color:var(--ci-teal);font-size:.75rem;margin:0;line-height:1.6;max-width:720px}
#hero-sme-od{background:var(--ci-paper)}
#hero-sme-od::after,#hero-invoice-pressure::after{display:none}
#hero-sme-od .sb-hero-picture,#hero-invoice-pressure .sb-hero-picture{inset:0}
#hero-sme-od .sb-hero-picture img{object-fit:contain;object-position:right center}
#hero-sme-od .sb-hero-copy h2{max-width:45%}
#hero-sme-od .sb-hero-description,#hero-sme-od .sb-hero-actions{max-width:42%}
#hero-invoice-pressure{background:var(--ci-paper)}
#hero-invoice-pressure .sb-hero-picture img{object-fit:contain;object-position:left center}
#hero-invoice-pressure .sb-hero-copy{padding-left:56%;padding-right:4%;max-width:1600px}
#hero-invoice-pressure .sb-hero-copy h2,#hero-invoice-pressure .sb-hero-description,#hero-invoice-pressure .sb-hero-actions{max-width:none}
@media(min-width:1600px){.sb-hero-panel{min-height:700px}.sb-hero-copy{max-width:1600px}}
@media(min-width:768px) and (max-width:1023px){.sb-hero-panel{min-height:560px}.sb-hero-copy{padding:36px 28px}.sb-hero-copy h2{font-size:2.3rem;max-width:57%}.sb-hero-description{max-width:44%;font-size:1rem}.sb-hero-footer{flex-wrap:wrap}.sb-hero-actions{max-width:45%}.sb-hero-products{width:100%;font-size:15px}}
@media(max-width:767px){
 .sb-mobile-cover .top .wrap{min-height:72px;padding:10px 24px;flex-wrap:nowrap;gap:12px}
 .sb-mobile-cover .top .head-cta{display:none}
 .sb-mobile-cover .top .brand img{width:180px;max-width:52vw}
 .sb-mobile-cover .mobile-menu{width:auto;margin-left:auto;border:0;padding:0}
 .sb-mobile-cover .mobile-menu summary{min-width:74px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;list-style:none;color:var(--ci-deep)}
 .sb-mobile-cover .mobile-menu summary::-webkit-details-marker{display:none}
 .sb-mobile-cover .mobile-menu summary::before{content:'☰';font-size:19px}
 .sb-mobile-cover .mobile-menu nav{position:absolute;top:100%;left:0;right:0;background:var(--white);padding:12px 20px 18px;box-shadow:0 12px 24px #081b4020}
 .sb-home-hero{background:var(--ci-deep)}
 .sb-hero-panel,#hero-sme-od,#hero-invoice-pressure{display:flex;flex-direction:column;min-height:0;background:var(--ci-deep)}
 .sb-hero-panel::after{display:none}
 .sb-hero-copy,#hero-invoice-pressure .sb-hero-copy{order:0;max-width:none;margin:0;padding:28px 20px 28px;display:flex;flex-direction:column;flex:1}
 .sb-hero-brand{color:var(--ci-mint);font-size:10px;margin-bottom:16px;letter-spacing:.14em}
 .sb-hero-copy h2,#hero-sme-od .sb-hero-copy h2{max-width:none;font-size:clamp(1.85rem,8.7vw,2.6rem);line-height:1.14;letter-spacing:-.015em;color:var(--white)}
 .sb-hero-copy h2>.hero-desktop-heading{display:none}
 .sb-hero-copy h2>.hero-mobile-heading{display:block}
 .hero-mobile-heading>span{display:block}
 .mh-intro{font-size:clamp(1.5rem,7.2vw,2.5rem)}
 .mh-title{font-size:clamp(2.35rem,10.8vw,3.7rem);margin-top:5px}
 .mh-support{font-size:clamp(1rem,4.8vw,1.5rem);margin-top:12px}
 .mh-limit{display:flex!important;align-items:baseline;gap:6px;color:var(--ci-mint);font-size:.42em;margin-top:14px}
 .mh-limit b{font-size:clamp(2.25rem,10.7vw,3.9rem);line-height:1.05}
 .mh-limit strong{font-size:1.5em}
 .mh-docs{font-size:clamp(1.7rem,8.9vw,3.1rem);color:var(--ci-mint);margin-top:7px}
 .mh-docs>span{display:block}
 .mh-ready{font-size:clamp(1.55rem,7.5vw,2.6rem);margin-top:12px}
 .mh-key{font-size:clamp(1.9rem,9.6vw,3.25rem);color:#ffda12;margin-top:12px}
 .mh-key>span{display:block}
 #hero-invoice-pressure .mh-title{color:#ffda12}
 .sb-hero-description,#hero-sme-od .sb-hero-description{max-width:none;color:var(--ci-mint);font-size:17px;line-height:1.8;margin:22px 0 0}
 .sb-hero-actions,#hero-sme-od .sb-hero-actions{max-width:none;display:grid;grid-template-columns:1fr;gap:12px;margin-top:auto;padding-top:24px}
 .sb-hero-products{width:100%;min-height:54px;padding:12px 14px;font-size:17px;border-radius:14px}
 .sb-hero-products{color:var(--ci-mint);border-color:var(--ci-accent);background:transparent}
 .sb-hero-picture,#hero-sme-od .sb-hero-picture,#hero-invoice-pressure .sb-hero-picture{position:relative;inset:auto;order:1;z-index:auto;width:100%;aspect-ratio:4/5;max-width:520px;margin:0 auto;flex-shrink:0;overflow:hidden}
 .sb-hero-picture img,#hero-sme-od .sb-hero-picture img,#hero-invoice-pressure .sb-hero-picture img{width:100%;height:100%;aspect-ratio:4/5;object-fit:contain;object-position:center}
 .sb-hero-footer{display:flex;flex-direction:column;align-items:stretch;padding:18px 20px 22px;gap:12px}
 .sb-hero-controls{justify-content:center;gap:0}
 .sb-hero-controls .sb-hero-prev,.sb-hero-controls .sb-hero-next{display:none}
 .sb-hero-controls button{color:var(--white);min-width:40px}
 .sb-hero-controls button:hover{background:#ffffff12}
 .sb-hero-dot span{background:var(--ci-accent)}
 .sb-hero-dot[aria-pressed='true'] span{background:#ffda12;width:16px}
 .sb-hero-controls .sb-hero-pause{border-color:var(--ci-accent);margin-left:8px;min-width:76px;font-size:12px}
 .sb-hero-note{font-size:11px;color:var(--ci-mint);line-height:1.7}
 .sb-home-hero :is(a,button):focus-visible{outline:3px solid #ffda12;outline-offset:4px}
}
@media(prefers-reduced-motion:reduce){.sb-hero-panel,.sb-hero-dot span{transition:none}}

/* Two hero artworks: keep the subjects right and all web copy left. */
@media(min-width:768px){
 .sb-home-hero .sb-hero-panel{aspect-ratio:16/9;min-height:620px}
 .sb-home-hero .sb-hero-picture{inset:0}
 .sb-home-hero .sb-hero-picture img{object-fit:contain;object-position:right center}
 #hero-invoice-pressure .sb-hero-copy{padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px);max-width:1360px}
 #hero-sme-od .sb-hero-copy h2,#hero-invoice-pressure .sb-hero-copy h2{max-width:43%;font-size:clamp(2.5rem,1rem + 4vw,5.5rem);line-height:1.25}
 /* 31 ต.ค. 69: เปลี่ยนจาก normal เป็น nowrap เพราะข้อความชุดใหม่ยาวขึ้น
    ("รูปแบบการชำระ" 13 ตัว) ตอนจอ 1440px ถูกตัดเป็น 2 บรรทัด กลายเป็นหัวข้อ 4 บรรทัด
    กฎนี้ใช้ตัวเลือกแบบ id จึงชนะกฎ nowrap ที่ตั้งไว้ด้านบน ต้องแก้ที่นี่ */
 #hero-sme-od .hero-emphasis,#hero-invoice-pressure .hero-emphasis{font-size:1em;white-space:nowrap}
 #hero-sme-od .sb-hero-description,#hero-invoice-pressure .sb-hero-description{max-width:39%}
 #hero-sme-od .sb-hero-actions,#hero-invoice-pressure .sb-hero-actions{max-width:43%}
 .sb-hero-copy .hero-subline{font-size:.82em}
 .sb-hero-products{background:#f8fbfff2}
}
@media(min-width:1600px){#hero-invoice-pressure .sb-hero-copy{max-width:1600px}}
@media(max-width:767px){
 #hero-sme-od .mh-title{font-size:clamp(31px,9.1vw,48px);color:var(--ci-mint)}
 .sb-hero-picture,#hero-sme-od .sb-hero-picture,#hero-invoice-pressure .sb-hero-picture{max-width:none}
}

/* CapEase mobile composition: artwork above, fading into one navy copy panel. */
@media(max-width:767px){
 .sb-home-hero{width:calc(100% - 12px);margin:10px 12px 0 0;border-radius:0 24px 24px 0;background:var(--ci-deep)}
 .sb-hero-panel,#hero-sme-od,#hero-invoice-pressure{display:block;background:var(--ci-deep)}
 .sb-hero-picture,#hero-sme-od .sb-hero-picture,#hero-invoice-pressure .sb-hero-picture{position:absolute;inset:0 0 auto;isolation:isolate;height:320px;aspect-ratio:auto;background:var(--ci-paper);z-index:0}
 .sb-hero-picture img,#hero-sme-od .sb-hero-picture img,#hero-invoice-pressure .sb-hero-picture img{height:320px;aspect-ratio:auto;object-fit:cover;object-position:right top}
 .sb-hero-picture::after{content:"";position:absolute;inset:0;height:auto;background:linear-gradient(180deg,transparent 100px,#0c19399e 215px,var(--ci-deep) 320px);pointer-events:none}
 .sb-hero-copy,#hero-invoice-pressure .sb-hero-copy{position:relative;z-index:1;min-height:660px;padding:230px 24px 24px;background:transparent}
 .sb-hero-brand{font-size:10px;letter-spacing:.1em;margin-bottom:14px;color:var(--ci-mint)}
 .sb-hero-copy h2,#hero-sme-od .sb-hero-copy h2{line-height:1.2}
 .mh-intro{font-size:clamp(1.875rem,1rem + 5vw,2.75rem)}
 .mh-title,#hero-sme-od .mh-title{font-size:clamp(2.125rem,1rem + 6.5vw,3.125rem);color:var(--white);margin-top:5px}
 .mh-ready{font-size:clamp(1.875rem,1rem + 5vw,2.75rem);margin-top:5px}
 #hero-invoice-pressure .mh-title{color:var(--ci-mint)}
 .sb-hero-description,#hero-sme-od .sb-hero-description{font-size:1.125rem;line-height:1.8;color:var(--ci-paper);margin-top:22px}
 .sb-hero-actions,#hero-sme-od .sb-hero-actions{padding-top:24px;gap:10px}
 .sb-hero-products{border-radius:999px;min-height:56px;font-size:clamp(1rem,.7rem + 1.8vw,1.125rem);padding:12px 14px}
 .sb-hero-products{background:transparent;color:var(--white);border:2px solid var(--ci-mint)}
 .sb-hero-footer{background:var(--ci-deep);padding:0 24px 20px}
 .sb-hero-controls .sb-hero-pause{border-color:var(--ci-accent)}
 .sb-hero-dot[aria-pressed='true'] span{background:var(--white)}
}

/* Keep the slide's copy readable after its illustration is removed. */
@media(min-width:768px){
 #hero-invoice-pressure.sb-hero-panel--text-only .sb-hero-copy{max-width:1080px;padding:48px clamp(24px,4vw,64px)}
 #hero-invoice-pressure.sb-hero-panel--text-only .sb-hero-copy h2,
 #hero-invoice-pressure.sb-hero-panel--text-only .sb-hero-description,
 #hero-invoice-pressure.sb-hero-panel--text-only .sb-hero-actions{max-width:100%}
}
@media(max-width:767px){
 #hero-invoice-pressure.sb-hero-panel--text-only .sb-hero-copy{padding-top:48px}
 #hero-invoice-pressure .sb-hero-picture img{object-position:right center}
 /* สไลด์ 1 เปลี่ยนรูปเป็นภาพคนคุยกันในโรงงาน 31 ต.ค. 69 —
    ค่ากลาง right top จะครอปติดเพดานโรงงาน ต้องเลื่อนลงมาที่ระดับหน้าคน */
 #hero-sme-od .sb-hero-picture img{object-position:center 30%}
 #hero-invoice-pressure .sb-hero-picture::after{background:linear-gradient(180deg,transparent 150px,#0c193955 220px,var(--ci-deep) 320px)}
}
@media(min-width:480px) and (max-width:767px){
 #hero-invoice-pressure .sb-hero-picture,
 #hero-invoice-pressure .sb-hero-picture img{height:86vw}
 #hero-invoice-pressure .sb-hero-picture::after{background:linear-gradient(180deg,transparent 45%,#0c193955 70%,var(--ci-deep) 100%)}
 #hero-invoice-pressure .sb-hero-copy{padding-top:calc(86vw - 90px)}
}

/* Emphasize the requested iPad slide headline without changing the artwork. */
#hero-invoice-pressure .sb-hero-copy h2{
 -webkit-text-stroke:1px #a3a6ad;
 paint-order:stroke fill;
}
@media(min-width:768px){
 #hero-invoice-pressure .sb-hero-copy h2{font-size:clamp(3rem,1.25rem + 5vw,6.6rem)}
}
@media(max-width:767px){
 #hero-invoice-pressure .sb-hero-copy h2{-webkit-text-stroke-width:.75px}
 #hero-invoice-pressure .mh-intro,#hero-invoice-pressure .mh-ready{font-size:clamp(2rem,1.1rem + 5.6vw,3rem)}
 #hero-invoice-pressure .mh-title{font-size:clamp(2.35rem,1.1rem + 7.2vw,3.5rem)}
}

/* Replay the image and copy entrance whenever either hero becomes active. */
@keyframes sb-hero-image-enter {
 from{transform:translateX(clamp(40px,7vw,110px));opacity:.35}
 to{transform:translateX(0);opacity:1}
}
@keyframes sb-hero-copy-enter {
 from{transform:translateX(clamp(-64px,-4vw,-24px));opacity:0}
 to{transform:translateX(0);opacity:1}
}
@media(prefers-reduced-motion:no-preference){
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-picture{
  animation:sb-hero-image-enter .9s cubic-bezier(.22,1,.36,1) both;
 }
 /* ── ตัวหนังสือวิ่งเข้าทีละบรรทัด (เจ้าของสั่ง 31 ต.ค. 69) ──
    เดิมกล่องข้อความเลื่อนเข้ามาทั้งก้อนพร้อมกัน มองแทบไม่ทัน
    เปลี่ยนเป็นไล่เข้าทีละชิ้น ป้ายแบรนด์ → 3 บรรทัดหัวข้อ → คำอธิบาย → ปุ่ม
    ใช้กับทั้งสองสไลด์ ให้หน้าตาเหมือนกัน
    ⚠ ทุกชิ้นต้องจบที่สถานะมองเห็น (both) ถ้าแอนิเมชันไม่ทำงานต้องยังอ่านได้ */
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-brand,
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-copy h2>span>span,
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-description,
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-actions{
  animation:sb-hero-copy-enter .62s cubic-bezier(.22,1,.36,1) both;
 }
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-brand{animation-delay:.05s}
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-copy h2>span>span:nth-child(1){animation-delay:.16s}
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-copy h2>span>span:nth-child(2){animation-delay:.27s}
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-copy h2>span>span:nth-child(3){animation-delay:.38s}
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-description{animation-delay:.5s}
 .sb-home-hero .sb-hero-panel.is-active .sb-hero-actions{animation-delay:.6s}
}

/* Blue actions with var(--white) labels on both homepage hero slides. */