:root{font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#28241e;background:#f6f1e9;font-synthesis:none}
*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{margin:0;background:#f6f1e9;color:#28241e}
a{color:inherit}
.landing-shell{display:grid;width:100%;height:100dvh;grid-template-rows:42% 58%;overflow:hidden}
.hero{position:relative;min-height:0;overflow:hidden;background:#7b6753;color:#fff}
.hero-image,.hero-shade{position:absolute;inset:0}
.hero-image{background:url('../landing/hero.webp') center 52%/cover no-repeat;transform:scale(1.015);-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.hero-shade{background:linear-gradient(0deg,rgba(23,18,14,.76),rgba(23,18,14,.05) 78%)}
.landing-header{position:absolute;z-index:2;top:0;left:0;display:flex;width:100%;align-items:center;justify-content:space-between;padding:14px 16px}
.landing-brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.landing-mark{display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(255,255,255,.58);border-radius:50%;font-size:13px;font-weight:850}
.landing-brand>span:last-child{display:grid}
.landing-brand b{font-size:13px;letter-spacing:.14em}
.landing-brand small{font-size:6px;font-weight:750;letter-spacing:.24em;opacity:.76}
.library-link{padding:9px 12px;border:1px solid rgba(255,255,255,.48);border-radius:22px;font-size:9px;font-weight:750;text-decoration:none;backdrop-filter:blur(8px)}
.hero-copy{position:absolute;z-index:1;left:0;bottom:0;padding:0 20px 20px}
.hero-copy p{margin:0 0 7px;color:#e6c78e;font-size:7px;font-weight:850;letter-spacing:.24em}
.hero-copy h1{margin:0;font-size:clamp(29px,8.8vw,45px);font-weight:560;line-height:1.02;letter-spacing:-.045em}
.hero-copy>span{display:block;margin-top:8px;color:rgba(255,255,255,.82);font-size:10px;line-height:1.45}
.choices{position:relative;z-index:3;display:grid;min-height:0;grid-template-rows:auto minmax(0,1fr);gap:10px;margin-top:-14px;padding:17px 12px max(12px,env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:#f6f1e9;box-shadow:0 -12px 34px rgba(40,32,22,.1)}
.choices-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:0 5px}
.choices-heading small{display:block;margin-bottom:2px;color:#a27e45;font-size:6px;font-weight:850;letter-spacing:.22em}
.choices-heading h2{margin:0;font-size:20px;font-weight:720;letter-spacing:-.02em}
.choices-heading>a{padding-bottom:2px;color:#897962;font-size:9px;font-weight:750;text-decoration:none;white-space:nowrap}
.choice-grid{display:grid;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}
.choice-card{display:flex;min-width:0;min-height:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 5px;border:1px solid #e4dbcf;border-radius:17px;background:#fff;color:#332d25;text-align:center;text-decoration:none;box-shadow:0 5px 17px rgba(72,54,32,.055);transition:transform .16s ease,border-color .16s ease}
.choice-card:hover,.choice-card:focus-visible{border-color:#b49158;transform:translateY(-2px);outline:0}
.choice-icon{display:grid;width:39px;height:39px;place-items:center;border-radius:14px;background:#f2e8d9;color:#b08a51}
.choice-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.choice-card strong{display:block;overflow:hidden;font-size:11px;font-weight:750;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.choice-card.accent{border-color:#d5bea0;background:#eadbc5}
.choice-card.accent .choice-icon{background:#fff8ee;color:#98713a}
@media(min-width:900px){.landing-shell{grid-template-rows:1fr;grid-template-columns:minmax(0,1.08fr) minmax(520px,.92fr)}.hero{grid-column:1}.choices{grid-column:2;margin:0;padding:clamp(34px,5vh,62px) clamp(28px,4vw,66px);border-radius:0;box-shadow:-15px 0 45px rgba(40,32,22,.08)}.landing-header{padding:22px clamp(24px,4vw,62px)}.landing-mark{width:44px;height:44px}.landing-brand b{font-size:15px}.hero-copy{padding:0 clamp(30px,5vw,76px) clamp(38px,7vh,78px)}.hero-copy p{margin-bottom:12px;font-size:9px}.hero-copy h1{font-size:clamp(46px,5.4vw,78px)}.hero-copy>span{margin-top:18px;font-size:14px}.choices-heading small{font-size:8px}.choices-heading h2{font-size:clamp(27px,2.4vw,39px)}.choice-grid{gap:12px}.choice-card{gap:11px;border-radius:22px}.choice-icon{width:58px;height:58px;border-radius:19px}.choice-icon svg{width:38px;height:38px}.choice-card strong{font-size:14px}.choices-heading>a{font-size:10px}}
@media(max-height:670px) and (max-width:899px){.landing-shell{grid-template-rows:39% 61%}.hero-copy{padding-bottom:15px}.hero-copy h1{font-size:28px}.hero-copy>span{font-size:9px}.choices{gap:7px;padding-top:14px}.choices-heading h2{font-size:18px}.choice-grid{gap:6px}.choice-card{gap:3px;border-radius:14px}.choice-icon{width:32px;height:32px;border-radius:11px}.choice-icon svg{width:23px;height:23px}.choice-card strong{font-size:10px}}
@media(max-width:360px){.landing-brand small{display:none}.library-link{font-size:8px}.choices{padding-left:8px;padding-right:8px}.choice-card strong{font-size:9px}}
