:root{color-scheme:light;--navy:#243f91;--green:#24966d;--ink:#172050;--line:#e1e7f1;--header-height:0px}
    *{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-width:none;scroll-padding-top:calc(var(--header-height) + 16px)}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}body{margin:0;padding-top:var(--header-height);background:#fff;color:var(--ink);font-family:"Sukhumvit Set","Sukhumvit",Tahoma,Arial,sans-serif;line-height:1.65;scrollbar-width:none}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #3471d3;outline-offset:-6px}svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
    .site-header{position:fixed;inset:0 0 auto;z-index:20;border-bottom:1px solid var(--line);background:#fff}.nav{width:min(1320px,calc(100% - 48px));height:calc(var(--header-height) - 1px);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:block;flex:none;width:280px;max-width:55%}.brand img{display:block;width:100%;height:auto}.nav-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--navy)}.skip{position:fixed;top:8px;left:8px;z-index:30;transform:translateY(-150%);background:white;padding:10px;border-radius:8px}.skip:focus{transform:none}
    .mode-hub{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0;padding:0;height:calc(100svh - var(--header-height));min-height:600px;background:white}.mode-tile{position:relative;display:block;overflow:hidden;background:#e8edf7;min-width:0;min-height:0}.mode-tile .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.mode-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#06173166,transparent 60%);pointer-events:none}.mode-tile:hover>.scene{transform:none}.mode-main{background:linear-gradient(180deg,#ffffff38,#ffffff10),url(city-bangkok-aerial-v2.webp) center 22%/cover no-repeat}.mode-main::after{display:none}.mode-main .tile-label{color:#fff;text-shadow:0 2px 12px #0005}.mode-main .mode-icon{border-color:#243f9125;background:#ffffffaa}.mode-game{background:#123e3b}.mode-game::before{content:'';position:absolute;inset:-12px;background:url(city-phuket-aerial-v2.webp) center/cover no-repeat;filter:blur(8px) brightness(.65)}.mode-game .scene{object-fit:contain;object-position:center;transition:none}.mode-game:hover .scene{transform:none}.mode-run{background:#172b43}.mode-run::before{content:'';position:absolute;inset:-12px;background:url(city-chiang-mai-aerial-v2.webp) center/cover no-repeat;filter:blur(8px) brightness(.65)}.mode-run .scene{object-fit:contain;object-position:center;transition:none}.mode-run:hover .scene{transform:none}.mode-run::after{background:linear-gradient(0deg,#06173188,transparent 65%)}
    .tile-label{position:absolute;z-index:1;top:24px;left:24px;display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;width:255px;gap:10px;min-height:48px;padding:10px 16px;border:1px solid #ffffff70;border-radius:14px;background:rgba(255,255,255,.09);backdrop-filter:blur(6px);color:#fff;font-size:18px;line-height:1.4;font-weight:400;white-space:nowrap;text-shadow:0 2px 12px #0005}.tile-label .mode-icon{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;background:none;border:0;border-radius:0;backdrop-filter:none}.mode-main .tile-label{color:#fff;text-shadow:0 2px 12px #0005}.mode-main .mode-icon{background:none;border:0}.mode-game .tile-label{left:auto;right:24px}.mode-run .tile-label{top:auto;bottom:24px}.tile-arrow{display:none}.mode-empty{background:linear-gradient(145deg,#f3f5fa,#e7efeb)}.mode-empty::after{display:none}
    .devices-stage{container-type:size;position:absolute;inset:90px 28px 28px;display:flex;align-items:center;justify-content:center}.laptop{position:relative;width:min(94%,180cqh);filter:drop-shadow(0 16px 14px #14284420)}.laptop-lid{position:relative;padding:10px 8px 8px;border-radius:13px 13px 5px 5px;background:#17232e;border:2px solid #77828d}.laptop-lid::before{content:'';position:absolute;top:3px;left:50%;width:3px;height:3px;border-radius:50%;background:#8a99a9}.laptop-screen{display:block;width:100%;height:auto;aspect-ratio:3360/1618;border-radius:3px;object-fit:contain}.laptop-base{position:relative;width:112%;height:13px;margin-left:-6%;border-radius:2px 2px 50% 50%/2px 2px 10px 10px;background:linear-gradient(#e0e5e9,#9eabb6);border-bottom:2px solid #687c8d}.laptop-base::before{content:'';position:absolute;top:0;left:41%;width:18%;height:4px;border-radius:0 0 6px 6px;background:#a0acb8}.phone{display:none;position:absolute;left:0;bottom:-2px;height:90%;max-height:260px;aspect-ratio:666/1440;border-radius:20px;padding:5px;background:#192733;border:2px solid #8b98a2;box-shadow:0 12px 28px #14284435;overflow:hidden}.phone-screen{display:block;width:100%;height:100%;border-radius:13px;object-fit:contain;background:white}.phone::after{content:'';position:absolute;bottom:7px;left:35%;width:30%;height:2px;border-radius:3px;background:#33415588}
    .mode-places{background:linear-gradient(180deg,#ffffff18,#ffffff10),url(city-khon-kaen-aerial-v2.webp) center 25%/cover no-repeat}.mode-places::after{display:none}.mode-places .devices-stage{inset:28px 28px 90px}.mode-places .tile-label{top:auto;left:auto;right:24px;bottom:24px;color:#fff;text-shadow:none}.mode-places .mode-icon{background:none}
    .tile-content{position:absolute;inset:0;display:block}.trial-button{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:164px;min-height:50px;padding:12px 18px;border:1px solid #ffffff80;border-radius:13px;background:linear-gradient(110deg,#243f91 50%,#dc2146 50%);color:#fff;font-size:16px;font-weight:400;line-height:1.4;white-space:nowrap;box-shadow:0 8px 24px #10204035}.trial-button svg{width:22px;height:22px}.trial-button:hover{filter:brightness(1.07)}.trial-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
    @media(max-width:450px){.trial-button{min-width:126px;min-height:44px;padding:10px 13px;font-size:13px;gap:7px;border-radius:11px}.trial-button svg{width:19px;height:19px}}
    .landing-loader{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 20% 20%,#edf3ff,transparent 65%),radial-gradient(ellipse at 85% 90%,#fff0f4,transparent 60%),#fbfcff;color:var(--navy);text-align:center;padding:24px}.landing-loading .landing-loader{display:flex}.landing-loading .mode-hub{visibility:hidden}.landing-loading{overflow:hidden}.landing-loader-card{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,100%)}.landing-loader-logo{width:110px;height:110px;object-fit:contain}.landing-loader-card strong{font-size:22px;font-weight:400}.landing-loader-card p{margin:0;font-size:13px;color:#475569}.landing-loader-card small{color:#64748b;font-size:12px}.landing-spinner{width:30px;height:30px;margin:8px 0;border:3px solid #243f9120;border-top-color:#dc2146;border-right-color:#243f91;border-radius:50%;animation:landing-spin .8s linear infinite}.landing-progress{width:200px;height:5px;border:0;border-radius:10px;overflow:hidden;appearance:none;background:#dce5f2}.landing-progress::-webkit-progress-bar{background:#dce5f2;border-radius:10px}.landing-progress::-webkit-progress-value{background:linear-gradient(90deg,#243f91,#dc2146);border-radius:10px}.landing-progress::-moz-progress-bar{background:#243f91;border-radius:10px}
    .intro-pending .trial-button:not(.is-revealed){visibility:hidden;opacity:0;pointer-events:none}.trial-button.is-revealed{animation:trial-appear .4s ease-out both,trial-wiggle .6s ease-in-out .4s 1}
    @keyframes landing-spin{to{transform:rotate(360deg)}}
    @keyframes trial-appear{from{opacity:0;transform:translate(-50%,calc(-50% + 9px)) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
    @keyframes trial-wiggle{0%,100%{transform:translate(-50%,-50%) rotate(0)}20%,60%{transform:translate(-50%,-50%) rotate(-2deg)}40%,80%{transform:translate(-50%,-50%) rotate(2deg)}}
    @media(prefers-reduced-motion:reduce){.landing-spinner,.trial-button.is-revealed{animation:none}.intro-pending .trial-button:not(.is-revealed){visibility:visible;opacity:1;pointer-events:auto}}
    .hub-center{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;width:clamp(240px,29vw,390px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.5);display:grid;place-items:center;pointer-events:none;overflow:hidden}.hub-center img{display:block;width:100%;height:100%;object-fit:contain}
    @media(max-width:700px){.mode-places .devices-stage{inset:35px 20px 80px}.mode-places .tile-label{right:22px;bottom:22px}.devices-stage{inset:80px 20px 35px}.phone{max-height:210px}.laptop-lid{padding:7px 5px 5px;border-radius:9px 9px 4px 4px}.laptop-base{height:9px}.tile-label{width:220px;font-size:16px;gap:8px;top:20px;left:20px;padding:9px 13px;min-height:44px}.tile-label .mode-icon{width:22px;height:22px}.mode-game .tile-label{right:22px}.mode-run .tile-label{bottom:22px}.hub-center{width:230px}}
    @media(max-width:450px){.mode-places .devices-stage{inset:95px 14px 70px}.mode-places .tile-label{right:12px;bottom:16px;white-space:nowrap}.devices-stage{inset:70px 14px 95px}.laptop{display:none}.laptop-lid{padding:6px 3px 3px;border-width:1px;border-radius:6px 6px 3px 3px}.laptop-base{height:6px;border-bottom-width:1px}.phone{display:block;height:100%;max-height:280px;left:50%;transform:translateX(-50%);bottom:0;border-radius:15px;padding:4px;border-width:1px}.phone-screen{border-radius:8px}:root{--header-height:0px}.nav{width:calc(100% - 32px)}.brand{width:190px}.nav-link{font-size:11px;gap:4px}.nav-link svg{width:17px;height:17px}.mode-hub{gap:0;padding:0;min-height:580px}.tile-label{width:calc(100% - 24px);top:16px;left:12px;gap:5px;font-size:11px;padding:8px;min-height:40px;border-radius:12px}.tile-label .mode-icon{width:17px;height:17px}.mode-icon svg{width:17px;height:17px}.mode-game .tile-label{right:12px}.mode-run .tile-label{bottom:16px}.tile-arrow{display:none}.hub-center{width:180px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mode-tile .scene{transition:none}.mode-tile:hover>.scene{transform:none}.mode-tile .devices-stage,.mode-tile .tile-label{transition:none}.mode-tile:hover .devices-stage,.mode-tile:hover .tile-label{transform:none}}
    .device-toggle{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;cursor:pointer;filter:drop-shadow(0 1px 3px #102040b3)}.device-toggle-main{left:5px;bottom:calc(50% + 5px)}.device-toggle-places{right:5px;top:calc(50% + 5px)}.device-toggle:hover{background:transparent}.device-toggle:focus-visible{outline:3px solid var(--navy);outline-offset:2px}.device-toggle svg{width:24px;height:24px}.device-toggle .icon-show{display:none}.device-toggle[aria-pressed="true"] .icon-show{display:block}.device-toggle[aria-pressed="true"] .icon-hide{display:none}.devices-stage{opacity:1;transform:translateX(0) rotate(0) scale(1);transform-origin:center;transition:transform .7s cubic-bezier(.22,.68,.18,1),opacity .5s ease;will-change:transform,opacity}.mode-main .devices-stage.is-hidden{transform:translateX(-130%) rotate(-28deg) scale(.8);opacity:0;pointer-events:none}.mode-places .devices-stage.is-hidden{transform:translateX(130%) rotate(28deg) scale(.8);opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.mode-tile .devices-stage{transition:none}}
.svg-symbols{position:absolute;width:0;height:0;overflow:hidden}

/* Four panels expand in place; the other panels become corner previews. */
.mode-hub{overflow:hidden}
.mode-tile{position:absolute;width:50%;height:50%;left:0;top:0;cursor:zoom-in;transition:width .65s cubic-bezier(.22,.68,.18,1),height .65s cubic-bezier(.22,.68,.18,1),left .65s cubic-bezier(.22,.68,.18,1),top .65s cubic-bezier(.22,.68,.18,1),border-radius .65s ease,box-shadow .65s ease}
.mode-game{left:50%}.mode-run{top:50%}.mode-places{left:50%;top:50%}
.mode-tile:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.mode-tile.is-expanded{left:0;top:0;width:100%;height:100%;z-index:5;cursor:zoom-out}
.mode-tile.is-collapsed{left:5px;top:5px;width:12%;height:12%;z-index:6;border-radius:12px;box-shadow:0 4px 16px #0005;cursor:zoom-out}
.mode-game.is-collapsed,.mode-places.is-collapsed{left:calc(88% - 5px)}.mode-run.is-collapsed,.mode-places.is-collapsed{top:calc(88% - 5px)}
.is-collapsed .tile-label,.is-collapsed .trial-button,.is-collapsed .devices-stage{visibility:hidden;pointer-events:none}
.has-expanded-tile .hub-center,.has-expanded-tile .device-toggle{opacity:0;visibility:hidden;pointer-events:none}
.hub-center{transition:opacity .25s ease,visibility .25s ease}
@media(max-width:450px){.mode-tile.is-expanded .devices-stage{inset:75px 14px}.mode-tile.is-expanded .phone{max-height:70svh}.mode-tile.is-collapsed{width:16%;height:12%;border-radius:8px}.mode-game.is-collapsed,.mode-places.is-collapsed{left:calc(84% - 5px)}}
@media(prefers-reduced-motion:reduce){.mode-tile,.hub-center{transition:none}}

/* Leave room for the opposite corner preview beside the mode button. */
.mode-tile.is-expanded .tile-label{width:min(255px,calc(88% - 29px));white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.mode-tile.is-expanded .tile-label{width:min(220px,calc(88% - 27px))}}
@media(max-width:450px){.mode-tile.is-expanded .tile-label{width:calc(84% - 27px)}}

/* Keep only the expanded panel's device visibility control available. */
.has-expanded-tile.expanded-main .device-toggle-main{opacity:1;visibility:visible;pointer-events:auto;z-index:7;left:5px;bottom:calc(50% + 5px)}
.has-expanded-tile.expanded-places .device-toggle-places{opacity:1;visibility:visible;pointer-events:auto;z-index:7;right:5px;top:calc(50% + 5px)}

/* Fixed layout selector. */
.edge-mode-picker{position:fixed;z-index:20;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));top:auto;transform:translateX(-50%);display:flex;flex-direction:row;gap:0;margin:0;padding:0;border:1px solid #ffffff70;border-radius:14px;background:#172a59e8;box-shadow:3px 5px 18px #101d4033;color:#fff;overflow:clip}
.edge-mode-picker legend{position:absolute;width:1px;height:1px;padding:0;clip-path:inset(50%);white-space:nowrap}
.edge-mode-option{position:relative;display:block;width:48px;height:48px;cursor:pointer}
.edge-mode-option+label{border-left:1px solid #ffffff26}
.edge-mode-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.edge-mode-option span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none;transition:background .15s,color .15s}
.edge-mode-option svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.edge-mode-option input:checked+span{background:#fff;color:#243f91;box-shadow:inset 0 -4px #f4b74b}
.edge-mode-option input:focus-visible+span{outline:3px solid #f4b74b;outline-offset:-4px}
.edge-mode-option:hover span{background:#ffffff20}.edge-mode-option:hover input:checked+span{background:#fff}
.device-toggle-main,.has-expanded-tile.expanded-main .device-toggle-main{left:5px}
@media(max-width:450px){.edge-mode-option{width:44px;height:44px}.edge-mode-option svg{width:22px;height:22px}.device-toggle-main,.has-expanded-tile.expanded-main .device-toggle-main{left:5px}}
@media(prefers-reduced-motion:reduce){.edge-mode-option span{transition:none}}

.edge-mode-option img{width:24px;height:24px;object-fit:contain}

/* List view uses four full-width rows and keeps native scrolling available. */
.mode-hub.layout-list{height:auto;min-height:100svh;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,minmax(180px,25svh));padding-bottom:calc(82px + env(safe-area-inset-bottom,0px));overflow:clip}
.layout-list .mode-tile{position:relative;left:auto;top:auto;width:100%;height:100%;cursor:default;transition:none}
.layout-list .hub-center{display:none}
.layout-list .tile-label{top:16px;bottom:auto;left:16px;right:auto;width:auto;max-width:calc(100% - 32px)}
.layout-list .trial-button{left:auto;right:24px;top:50%;transform:translateY(-50%)}
.layout-list .trial-button.is-revealed{animation:none}
.layout-list .device-toggle-main{left:auto;right:8px;top:8px;bottom:auto}
.layout-list .device-toggle-places{left:auto;right:8px;top:8px;bottom:auto}
.layout-list .mode-places .devices-stage,.layout-list .devices-stage{inset:65px 80px 12px}
@media(max-width:700px){
 .mode-hub.layout-list{grid-template-rows:repeat(4,minmax(220px,32svh))}
 .layout-list .tile-label{max-width:calc(100% - 70px);white-space:normal}
 .layout-list .trial-button{top:auto;bottom:20px;right:20px;transform:none}
 .layout-list .mode-places .devices-stage,.layout-list .devices-stage{inset:65px 155px 12px 16px}
 .layout-list .device-toggle-places{top:8px}
}

.layout-transition .mode-tile{transition:none;transform-origin:top left;will-change:transform}

/* Opening real space in document flow lets the page scroll naturally. */
.site-reveal-space{height:0;background:#fff;overflow:clip;transition:height .65s cubic-bezier(.22,.68,.18,1)}
.site-open .site-reveal-space{height:50svh}
@media(prefers-reduced-motion:reduce){.site-reveal-space{transition:none}}

/* The image edge curls above a recessed white surface. */
.site-reveal-space{position:relative;background:linear-gradient(180deg,#f5f6f8 0,#fff 70%);overflow:visible}
.site-reveal-space::after{content:'';position:absolute;z-index:9;left:0;right:0;bottom:-1px;height:18px;border-radius:50% 50% 0 0 / 5px 5px 0 0;background:linear-gradient(180deg,#ffffff 0%,#f5f6f8 24%,#cbd2dc 55%,#8b98aa 78%,#263650 100%);box-shadow:0 -9px 16px #15243c25,0 -2px 4px #15243c30;opacity:0;pointer-events:none;transition:opacity .3s ease}
.site-open .site-reveal-space::after{opacity:1}
@media(prefers-reduced-motion:reduce){.site-reveal-space::after{transition:none}}

.site-reveal-space{visibility:hidden;transition:height .65s cubic-bezier(.22,.68,.18,1),visibility 0s .65s}
.site-open .site-reveal-space{height:max(50svh,var(--site-space-height,50svh));visibility:visible;transition:height .65s cubic-bezier(.22,.68,.18,1),visibility 0s}
.site-guide{padding:28px clamp(20px,4vw,64px) 38px;opacity:0;transform:translateY(-12px);transition:opacity .4s .1s,transform .5s}
.site-open .site-guide{opacity:1;transform:none}
.site-guide-heading{margin-bottom:22px}.site-guide-heading>span{font-size:10px;letter-spacing:1.5px;font-weight:400;color:#76839a}.site-guide-heading h2{margin:5px 0 3px;font-size:clamp(22px,2.1vw,30px);font-weight:400;line-height:1.4;color:#172a59}.site-guide-heading>p{margin:0;font-size:13px;color:#68768b}
.site-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.site-guide-card{--guide-color:#243f91;--guide-soft:#eaf0ff;display:flex;flex-direction:column;min-width:0;padding:0 0 0 20px;border-left:1px solid #dde3ec}
.site-guide-card:first-child{padding-left:0;border-left:0}.guide-game{--guide-color:#15846d;--guide-soft:#e8f5ee}.guide-run{--guide-color:#d73357;--guide-soft:#ffedf1}.guide-checkin{--guide-color:#b47825;--guide-soft:#fff3df}
.guide-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.guide-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff;border-radius:13px;background:var(--guide-soft);color:var(--guide-color);box-shadow:0 3px 9px #172a5908}.guide-icon svg{width:24px;height:24px}.guide-number{font-size:9px;letter-spacing:1px;color:#8a97ac}
.site-guide-card h2{margin:12px 0 7px;font-size:17px;line-height:1.5;color:#1c3158;font-weight:400}.site-guide-card>p{margin:0;color:#66758a;font-size:13px;line-height:1.8}.site-guide-card ul{list-style:none;padding:0;margin:12px 0 18px;color:#465975;font-size:12px;line-height:1.7}.site-guide-card li{position:relative;padding-left:13px;margin:4px 0}.site-guide-card li::before{content:'';position:absolute;left:0;top:.65em;width:4px;height:4px;border-radius:50%;background:var(--guide-color)}
.site-guide-card>a{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;color:var(--guide-color);font-size:12px;font-weight:400;min-height:32px}.site-guide-card>a svg{width:16px;height:16px}.site-guide-card>a:hover{text-decoration:underline}.site-guide-card>a:focus-visible{outline:2px solid var(--guide-color);outline-offset:4px;border-radius:3px}
@media(max-width:700px){.site-guide{padding:28px 24px 36px}.site-guide-grid{grid-template-columns:minmax(0,1fr);gap:20px}.site-guide-card,.site-guide-card:first-child{padding:20px 0 0;border-left:0;border-top:1px solid #dde3ec}.site-guide-card:first-child{border-top:0;padding-top:0}.site-guide-heading{margin-bottom:24px}.site-guide-card h2{font-size:19px}.site-guide-card>p{font-size:14px}.site-guide-card ul{font-size:13px}.site-guide-card>a{font-size:13px}.guide-number{font-size:10px}}
@media(prefers-reduced-motion:reduce){.site-reveal-space,.site-guide{transition:none}.site-guide{transform:none}}

.site-reveal-space{overflow:clip}

.site-guide-heading .guide-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:8px 0 6px}
.guide-title-phrase{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.guide-title-number{display:inline-grid;place-items:center;flex:none;width:1.65em;height:1.65em;border-radius:50%;font-size:1em;line-height:1;font-weight:400;box-shadow:inset 0 1px 0 #ffffff90}
.number-one{background:#dfeafa;color:#345a8b}.number-four{background:#f7e1e9;color:#965570}
@media(max-width:700px){.site-guide-heading .guide-title{gap:7px 12px}.guide-title-phrase{gap:7px}}

.guide-domain{display:block;margin-top:3px;font-size:11px;line-height:1.5;color:#8b94a3;overflow-wrap:anywhere;letter-spacing:.15px}

.landing-departing .landing-loader{display:flex}.landing-departing{overflow:hidden}.landing-progress[hidden]{display:none}

/* Statement introduction, revealed with the first view option. */
.statement-guide{margin-top:clamp(36px,5vw,64px);padding-top:clamp(30px,4vw,48px);border-top:2px dashed #c9d3e1}
.statement-heading{max-width:850px;margin-bottom:28px}
.statement-eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:400;color:#76839a}
.statement-heading h2{margin:8px 0 10px;color:#172a59;font-size:clamp(24px,2.5vw,36px);line-height:1.45;font-weight:400}
.statement-heading h2 span{color:#15846d}
.statement-heading>p{margin:0;color:#68768b;font-size:14px;line-height:1.9}
.statement-benefits{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.statement-benefits span{padding:5px 12px;border-radius:20px;background:#e8f5ee;color:#256c5d;font-size:12px}
.statement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.statement-card{min-width:0;padding:0 0 0 20px;border-left:1px solid #dde3ec}
.statement-card:first-child{padding-left:0;border-left:0}
.statement-step{font-size:10px;letter-spacing:.6px;color:#15846d;font-weight:400}
.statement-card h3{margin:10px 0 8px;color:#1c3158;font-size:17px;line-height:1.6;font-weight:400}
.statement-card p{margin:0;font-size:13px;line-height:1.8;color:#66758a}
.statement-card ul{margin:14px 0 0;padding:0;list-style:none;color:#465975;font-size:12px;line-height:1.9}
.statement-card li{position:relative;padding-left:14px;margin:9px 0}
.statement-card li::before{content:'';position:absolute;left:0;top:.8em;width:4px;height:4px;border-radius:50%;background:#15846d}
.statement-privacy{margin:28px 0 0;padding:18px 20px;border-radius:12px;background:#f0f4f8;color:#60718a;font-size:12px;line-height:1.9}
@media(min-width:701px) and (max-width:1050px){.statement-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.statement-card:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:700px){.statement-guide{margin-top:36px;padding-top:30px}.statement-grid{grid-template-columns:minmax(0,1fr);gap:22px}.statement-card,.statement-card:first-child{padding:22px 0 0;border-left:0;border-top:1px solid #dde3ec}.statement-card:first-child{padding-top:0;border-top:0}.statement-card h3{font-size:19px}.statement-card p{font-size:14px}.statement-card ul{font-size:13px}.statement-privacy{padding:16px}}

.statement-start{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0 18px;padding:11px 18px;border-radius:12px;background:#15846d;color:#fff;font-size:14px;font-weight:400;box-shadow:0 4px 12px #15846d20;transition:background .15s}
.statement-start:hover{background:#106c59}
.statement-start:focus-visible{outline:3px solid #243f91;outline-offset:4px}
.statement-start svg{width:17px;height:17px}
@media(prefers-reduced-motion:reduce){.statement-start{transition:none}}

.statement-card li.statement-limitation{display:flex;align-items:flex-start;gap:7px;padding-left:0;color:#b42332}
.statement-card li.statement-limitation::before{content:none}
.statement-limitation svg{width:14px;height:14px;margin-top:.35em;stroke-width:2.4}

.statement-start svg.statement-pdf-icon{width:28px;height:32px;stroke:none}
.statement-pdf-icon .pdf-paper{fill:#fff}
.statement-pdf-icon .pdf-fold{fill:#d1fae5;stroke:#15846d;stroke-width:1.2;stroke-linejoin:round}
.statement-pdf-icon .pdf-badge{fill:#d1fae5}
.statement-pdf-icon text{fill:#106c59;stroke:none;font-family:Arial,sans-serif;font-size:10px;font-weight:400;letter-spacing:.5px}

/* Scenic imagery is optional; layout selection remains independent. */
.mode-hub:not(.show-tile-images) .mode-tile{background:#e5efff}
.mode-hub:not(.show-tile-images) .mode-tile::before,
.mode-hub:not(.show-tile-images) .mode-tile::after{display:none}
.mode-hub:not(.show-tile-images) .mode-tile .scene{visibility:hidden}
.mode-hub:not(.show-tile-images) .mode-tile .tile-label{color:#243f91;background:#ffffffb8;border-color:#b4c9ec;text-shadow:none}
.mode-hub:not(.show-tile-images) .device-toggle{color:#294b8c;filter:none}
button.edge-background-toggle{flex:none;padding:0;border:0;border-left:1px solid #ffffff26;background:transparent;color:inherit;font:inherit}
.edge-background-toggle[aria-pressed="true"]>span{background:#fff;color:#243f91;box-shadow:inset 0 -4px #f4b74b}
.edge-background-toggle:focus-visible{outline:0}
.edge-background-toggle:focus-visible>span{outline:3px solid #f4b74b;outline-offset:-4px}

/* Separate the four panels without changing their dimensions or hit targets. */
.mode-hub:not(.layout-list):not(.has-expanded-tile)::before,
.mode-hub:not(.layout-list):not(.has-expanded-tile)::after{content:'';position:absolute;z-index:2;pointer-events:none}
.mode-hub:not(.layout-list):not(.has-expanded-tile)::before{left:50%;top:0;bottom:0;border-left:2px dashed #6387c6;transform:translateX(-1px)}
.mode-hub:not(.layout-list):not(.has-expanded-tile)::after{top:50%;left:0;right:0;border-top:2px dashed #6387c6;transform:translateY(-1px)}
.mode-hub.layout-list .mode-tile+.mode-tile{border-top:2px dashed #6387c6}

/* Device-image controls belong to the optional image presentation. */
.mode-hub:not(.show-tile-images) .device-toggle{display:none}

/* Four regional murals soften the plain presentation with quiet blue linework. */
.mode-main{--region-art:url(region-north-lines-v1.webp)}
.mode-game{--region-art:url(region-isaan-lines-v1.webp)}
.mode-run{--region-art:url(region-central-lines-v1.webp)}
.mode-places{--region-art:url(region-south-lines-v1.webp)}
.mode-hub:not(.show-tile-images) .mode-tile::before{content:'';display:block;position:absolute;inset:0;background:var(--region-art) center bottom/cover no-repeat;filter:none;opacity:.36;pointer-events:none}
@media(max-width:450px){
 .mode-hub:not(.show-tile-images):not(.layout-list) .mode-tile::before{background-size:auto 80%;background-position:35% bottom;opacity:.32}
}

/* Use regular text throughout the landing page, including semantic headings. */
body{font-weight:400}
h1,h2,h3,h4,h5,h6,strong,b{font-weight:400}

/* Full-color photographic presentation: Bangkok, Phuket, Chiang Mai, Khon Kaen. */
.mode-hub.show-tile-images .mode-main{background-position:center center}
.mode-hub.show-tile-images .mode-places{background-position:center center}
.mode-hub.show-tile-images .mode-game::before,
.mode-hub.show-tile-images .mode-run::before{display:none}
.mode-hub.show-tile-images .mode-tile .scene{object-fit:cover}
.mode-hub.show-tile-images .mode-run .scene{object-position:center center}

/* Softer menu labels without a colored outline. */
.mode-hub .mode-tile:is(.mode-main,.mode-game,.mode-run,.mode-places) .tile-label{border-color:transparent}

/* One shared label width for all four menus in every presentation. */
.mode-hub{--tile-label-width:min(255px,calc(50vw - 48px))}
.mode-hub .mode-tile .tile-label{box-sizing:border-box;width:var(--tile-label-width);max-width:none;flex-shrink:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.mode-hub{--tile-label-width:min(220px,calc(50vw - 44px))}}
@media(max-width:450px){.mode-hub{--tile-label-width:calc(50vw - 24px)}}

/* Fifth journey mode appears in the website details, ahead of Statement. */
.site-guide-card.guide-heal{--guide-color:#b64d78;--guide-soft:#fbe7f0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:28px;margin-top:32px;padding:26px 28px;border:1px solid #eed8e4;border-radius:20px;background:linear-gradient(120deg,#fff7fa,#f5f0fa)}
.guide-heal .guide-card-top{justify-content:flex-start;gap:12px}
.guide-heal h2{color:#8d446c;font-size:22px}
.heal-guide-intro>p{margin:0;color:#66758a;font-size:13px;line-height:1.8}
.guide-heal ul{margin:0}.guide-heal li{margin-block:9px}
.heal-guide-action{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.heal-guide-action>a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid #e3afc7;border-radius:12px;background:#fff8fc;color:var(--guide-color);font-size:13px;white-space:nowrap}
.heal-guide-action>a>svg{width:16px;height:16px}
.heal-guide-action>a:hover{background:#fbe0ed}.heal-guide-action>a:focus-visible{outline:2px solid var(--guide-color);outline-offset:4px}
@media(max-width:1050px){.site-guide-card.guide-heal{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.heal-guide-action{grid-column:1/-1}}
@media(max-width:700px){.site-guide-card.guide-heal{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px 18px;margin-top:28px}.heal-guide-intro>p{font-size:14px}.heal-guide-action{grid-column:auto}.heal-guide-action>a{white-space:normal}}
/* Keep the original two-tone trial button appearance at the mode-label positions. */
.mode-hub .mode-tile:is(.mode-main,.mode-game,.mode-run,.mode-places) .tile-label{justify-content:center;text-align:center;gap:9px;min-height:50px;padding:12px 18px;border:1px solid #ffffff80;border-radius:13px;background:linear-gradient(110deg,#243f91 50%,#dc2146 50%);color:#fff;font-size:16px;font-weight:400;line-height:1.4;text-shadow:none;box-shadow:0 8px 24px #10204035;backdrop-filter:none}
.mode-hub .mode-tile .tile-label .mode-icon{color:#fff;background:none;width:22px;height:22px}
.mode-hub .mode-tile .tile-label .mode-icon svg{width:22px;height:22px}
.mode-hub .mode-tile .tile-label:hover{filter:brightness(1.07)}
.mode-hub .mode-tile .tile-label:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:450px){.mode-hub .mode-tile:is(.mode-main,.mode-game,.mode-run,.mode-places) .tile-label{min-height:44px;padding:10px 8px;font-size:13px;gap:7px;border-radius:11px}.mode-hub .mode-tile .tile-label .mode-icon,.mode-hub .mode-tile .tile-label .mode-icon svg{width:19px;height:19px}}

/* Website-view masthead connects the travel and account sections. */
.landing-intro{text-align:center;padding:clamp(24px,4vw,56px) 16px clamp(30px,4vw,52px);margin-bottom:28px;border-bottom:1px solid #dde4ed;background:radial-gradient(ellipse at 25% 30%,#e7edff90,transparent 55%),radial-gradient(ellipse at 80% 40%,#e5f5ed80,transparent 55%);border-radius:24px 24px 0 0}
.landing-intro-domain{margin:0 0 18px;font-size:clamp(18px,2vw,25px);letter-spacing:.04em;color:#7c8ba4;line-height:1.5}
.landing-intro-domain strong{color:#243f91;font-weight:600}
.landing-intro-domain a{color:inherit;text-decoration:none;white-space:nowrap}.landing-intro-domain a>span{color:#15846d}.landing-intro-domain a:hover{color:#243f91}.landing-intro-domain a:focus-visible{outline:2px solid #15846d;outline-offset:5px;border-radius:4px}
.landing-intro-title{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 22px;margin:0;font-size:clamp(28px,3.8vw,52px);font-weight:500;line-height:1.5;letter-spacing:-.025em}
.intro-travel{color:#243f91}.intro-money{color:#15846d}
.landing-intro-title .intro-versus{display:inline-grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #dce4ed;border-radius:50%;background:#ffffffb8;color:#8995a9;font-size:15px;letter-spacing:0;font-style:italic}
.landing-intro-caption{margin:14px 0 0;color:#77859a;font-size:14px;line-height:1.8}
.landing-intro-line{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;color:#6482a7}
.landing-intro-line>span{width:64px;height:1px;background:linear-gradient(90deg,transparent,#bccbdc)}
.landing-intro-line>span:last-child{transform:rotate(180deg)}
.landing-intro-line>svg{width:20px;height:20px}.landing-intro-line>svg:last-of-type{color:#5d9c8c}
.landing-intro-line>i{width:4px;height:4px;border-radius:50%;background:#b8c6d6}
@media(max-width:700px){.landing-intro{padding:28px 8px 30px;margin-bottom:26px}.landing-intro-title{font-size:clamp(22px,5.5vw,32px);gap:8px 10px}.landing-intro-title .intro-versus{width:28px;height:28px;font-size:11px}.landing-intro-domain{margin-bottom:14px;font-size:19px}.landing-intro-caption{font-size:12px}.landing-intro-line{margin-top:18px}}
@media(max-width:380px){.landing-intro-title{column-gap:7px;font-size:20px}.landing-intro-title .intro-versus{width:24px;height:24px}}
@media(max-width:480px){.landing-intro-title{flex-direction:column;gap:7px;font-size:clamp(24px,6.5vw,30px);line-height:1.45}.landing-intro-title>span{max-width:100%}.landing-intro-title .intro-versus{position:relative;width:26px;height:26px;font-size:11px}.landing-intro-title .intro-versus::before,.landing-intro-title .intro-versus::after{content:"";position:absolute;top:50%;width:36px;height:1px;background:#dce4ed}.landing-intro-title .intro-versus::before{right:calc(100% + 10px)}.landing-intro-title .intro-versus::after{left:calc(100% + 10px)}.landing-intro-caption{max-width:260px;margin:16px auto 0;text-wrap:balance}}

.landing-intro-logo{display:block;width:clamp(180px,20vw,260px);max-width:100%;height:auto;margin:0 auto 16px;object-fit:contain}
@media(max-width:700px){.landing-intro-logo{width:180px;max-width:100%;margin-bottom:14px}}