/* ใช้เฉพาะ token จาก brand.tokens.css · โหมดสว่างเป็นหลัก (ไฟล์โลโก้ v6 cream มีพื้นงาช้างในตัว) */
:root{color-scheme:light}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--color-bg-day);color:var(--color-text-on-day);font:var(--fw-regular) var(--fs-web-body)/var(--lh-thai) var(--font-thai);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--space-3)}
.latin,.price{font-family:var(--font-latin)}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--space-2);top:var(--space-2);background:var(--color-text-on-day);color:var(--color-bg-day);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);z-index:9}
:focus-visible{outline:2px solid var(--color-text-on-day);outline-offset:3px;border-radius:var(--radius-sm)}
.night :focus-visible{outline-color:var(--color-text-on-night)}
h1,h2,h3{font-weight:var(--fw-semibold);line-height:var(--lh-display);text-wrap:balance}
h1{font-size:clamp(34px,9vw,64px)}
h2{font-size:clamp(26px,6vw,var(--fs-web-display));margin-bottom:var(--space-2)}
h3{font-size:var(--fs-web-title)}
section{padding:var(--space-6) 0}
.lead{font-size:var(--fs-web-title);max-width:34em;color:var(--color-muted-on-day)}
.small{font-size:var(--fs-web-min);color:var(--color-muted-on-day)}
/* ปุ่มหลัก = จุดทองจุดเดียวของหน้า (ทอง + กราไฟต์ คอนทราสต์ผ่าน) */
.btn{display:inline-flex;align-items:center;gap:var(--space-1);min-height:56px;padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--color-accent-gold);color:var(--color-text-on-day);font-weight:var(--fw-semibold);font-size:var(--fs-web-title);text-decoration:none;transition:transform var(--dur-quick) var(--ease-signature)}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:none}
/* hero */
.hero{padding:var(--space-5) 0 var(--space-6)}
.hero .logo{width:min(220px,60vw);height:auto;margin:0 0 var(--space-5) -6px}
.hero h1{margin-bottom:var(--space-2)}
.hero .cta{margin:var(--space-4) 0 var(--space-2)}
.badge{display:inline-block;border:1px solid var(--color-line-day);border-radius:var(--radius-pill);padding:2px var(--space-2);font-size:var(--fs-web-min);color:var(--color-muted-on-day);background:var(--color-surface-day)}
.hero-grid{display:grid;gap:var(--space-5)}
/* steps */
.steps{list-style:none;padding:0;display:grid;gap:var(--space-2);margin-top:var(--space-4);counter-reset:s}
.steps li{counter-increment:s;background:var(--color-surface-day);border:1px solid var(--color-line-day);border-radius:var(--radius-md);padding:var(--space-3);box-shadow:var(--shadow-card)}
.steps li::before{content:counter(s);font:var(--fw-semibold) var(--fs-web-display)/1 var(--font-latin);color:var(--color-accent-gold-deep);display:block;margin-bottom:var(--space-1)}
.steps b{display:block;font-size:var(--fs-web-title)}
.steps span{color:var(--color-muted-on-day)}
/* ใบเช็กราคา */
.receipt{background:var(--color-surface-day);border:1px solid var(--color-line-day);border-radius:var(--radius-lg);padding:var(--space-3);box-shadow:var(--shadow-card);max-width:420px;width:100%}
.receipt .tag{display:flex;justify-content:space-between;gap:var(--space-1);align-items:center;font-size:var(--fs-web-min);color:var(--color-muted-on-day);border-bottom:1px dashed var(--color-line-day);padding-bottom:var(--space-2);margin-bottom:var(--space-2)}
.receipt .tag strong{background:var(--color-text-on-day);color:var(--color-bg-day);border-radius:var(--radius-pill);padding:2px var(--space-2);font-weight:var(--fw-medium)}
.receipt .item{font-weight:var(--fw-medium)}
.receipt .price{font-size:var(--fs-web-price-hero);font-weight:var(--fw-semibold);line-height:var(--lh-price);margin:var(--space-2) 0;font-variant-numeric:tabular-nums}
.receipt dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-2);font-size:var(--fs-web-min)}
.receipt dt{color:var(--color-muted-on-day)}.receipt dd{margin:0;text-align:right}
.receipt .ok{display:inline-flex;gap:6px;align-items:center;margin-top:var(--space-2);font-weight:var(--fw-medium)}
.receipt .ok svg{width:20px;height:20px;stroke:var(--color-accent-gold-deep);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.receipt .ok path{stroke-dasharray:24;stroke-dashoffset:0}
.receipt .note{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px dashed var(--color-line-day)}
.split{display:grid;gap:var(--space-5);align-items:center}
/* can do */
.cards{list-style:none;padding:0;display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.cards li{border-top:1px solid var(--color-line-day);padding:var(--space-3) 0}
.cards b{display:block;font-size:var(--fs-web-title)}
.cards span{color:var(--color-muted-on-day)}
/* คำสัญญา · พื้นกลางคืน */
.night{background:var(--color-bg-night);color:var(--color-text-on-night)}
.night .small,.night .lead,.night p{color:var(--color-muted-on-night)}
.promises{list-style:none;padding:0;display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.promises li{background:var(--color-surface-night);border:1px solid var(--color-line-night);border-radius:var(--radius-md);padding:var(--space-3)}
.promises b{display:block;font-size:var(--fs-web-title);color:var(--color-accent-gold);margin-bottom:var(--space-1)}
.promises span{color:var(--color-text-on-night)}
/* faq */
details{border-bottom:1px solid var(--color-line-day)}
summary{cursor:pointer;list-style:none;padding:var(--space-3) 0;font-weight:var(--fw-medium);font-size:var(--fs-web-title);display:flex;justify-content:space-between;gap:var(--space-2)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-latin);transition:transform var(--dur-quick) var(--ease-signature)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 var(--space-3);color:var(--color-muted-on-day);max-width:38em}
.final{text-align:center}.final .lead{margin:0 auto var(--space-4)}
footer{border-top:1px solid var(--color-line-day);padding:var(--space-4) 0 var(--space-5);font-size:var(--fs-web-min);color:var(--color-muted-on-day)}
footer .wrap{display:grid;gap:var(--space-2)}
footer img{width:120px;height:auto}
footer nav{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3)}
.doc{max-width:720px;margin:0 auto;padding:var(--space-5) var(--space-3)}.doc h2{font-size:var(--fs-web-title);margin:var(--space-4) 0 var(--space-1)}.doc li,.doc p{margin-bottom:var(--space-1)}.doc ul{padding-left:var(--space-3)}
/* โมชัน: ช่วงเปิดหน้า 1 จังหวะ + ใบเช็กเด้งขึ้นตอนเลื่อนถึง · ปิดทั้งหมดเมื่อ reduced-motion */
@media (prefers-reduced-motion:no-preference){
 .js .rise{opacity:0;transform:translateY(16px);animation:rise var(--dur-slow) var(--ease-signature) forwards;animation-delay:calc(var(--i,0)*var(--stagger-line)*3)}
 @keyframes rise{to{opacity:1;transform:none}}
 .js .receipt{opacity:0;transform:translateY(24px)}
 .js .receipt.in{opacity:1;transform:none;transition:opacity var(--dur-standard) var(--ease-signature),transform var(--dur-standard) var(--ease-signature)}
 .js .receipt .ok path{stroke-dashoffset:24}
 .js .receipt.in .ok path{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur-standard) var(--ease-signature) var(--dur-slow)}
}
@media (min-width:760px){
 .wrap{padding:0 var(--space-5)}
 section{padding:var(--space-7) 0}
 .hero{padding:var(--space-6) 0 var(--space-7)}
 .split{grid-template-columns:1.1fr .9fr}
 .steps{grid-template-columns:repeat(3,1fr)}
 .cards{grid-template-columns:repeat(2,1fr);column-gap:var(--space-5)}
 .promises{grid-template-columns:repeat(3,1fr)}
 footer .wrap{grid-template-columns:1fr auto;align-items:start}
}