html,body,.customer-shell{width:100%;min-height:100%;overflow-x:hidden}.campaign-body{margin:0;background:#0879dd}.campaign-page{width:100%;min-height:100dvh;overflow:hidden;background:#0879dd}.campaign-intro{position:relative;width:100%;height:100dvh;min-height:0;overflow:hidden;background:#0879dd url("images/campaign/index_bg.jpg") center/100% 100% no-repeat;isolation:isolate}.campaign-intro img{display:block;max-width:100%;height:auto}.intro-corner-logo,.intro-main-logo,.intro-left-copy,.intro-rate-copy,.intro-form,.intro-privacy,.intro-start{position:absolute;z-index:1}.intro-corner-logo{top:0;right:0;width:16.3%;min-width:140px}.intro-main-logo{top:3.5%;left:50%;width:57%;--rest:translateX(-50%)}.intro-left-copy{top:15%;left:4%;width:16%;--rest:translateX(0)}.intro-rate-copy{top:36%;left:3%;width:28%;--rest:translateX(0)}.intro-float{opacity:0;animation:intro-pop .58s cubic-bezier(.23,1,.32,1) var(--delay) both}.intro-float picture{display:block;animation:intro-float 3.1s cubic-bezier(.77,0,.175,1) calc(var(--delay) + .72s) infinite}.intro-form{top:43.3%;left:50%;width:72%;max-width:850px;--rest:translateX(-50%)}.intro-form-title{width:58%;margin:0 auto -8px;position:relative;z-index:2}.intro-input-card{display:grid;grid-template-columns:1fr;gap:12px;padding:30px 8% 20px;border:7px solid #ffd400;border-radius:35px;background:#fff;box-shadow:0 6px 0 #062b71}.intro-field{display:grid;grid-template-columns:82px 190px minmax(0,1fr);align-items:center;min-height:62px;overflow:hidden;border-radius:13px;background:#ffd400;color:#063b83;font-size:1.35rem;font-weight:700}.intro-field img{width:62px;height:62px;object-fit:contain;margin-left:10px}.intro-field span{padding:0 12px}.intro-field input{width:100%;height:100%;min-height:62px;padding:8px 16px;border:2px solid #062b71;border-radius:10px;background:#fff;color:#063b83;font:700 1.5rem "Noto Sans Thai",sans-serif;outline-offset:3px}.intro-field input:focus-visible{outline:3px solid #ffc928}.intro-privacy{right:18%;bottom:12.5%;left:18%;margin:0;color:#062b71;font-size:clamp(.69rem,1.25vw,.9rem);font-weight:600;line-height:1.4;text-align:center;--rest:translateX(0)}.intro-privacy a{color:#062b71;text-decoration:underline}.intro-start{bottom:2.8%;left:50%;width:24%;min-width:215px;padding:0;border:0;background:transparent;cursor:pointer;--rest:translateX(-50%)}.intro-start img{width:100%;transition:transform .16s ease}.intro-start:hover img{transform:scale(1.025)}.intro-start:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:14px}.intro-pop{opacity:0;animation:intro-pop .58s cubic-bezier(.16,1,.3,1) var(--delay) both}@keyframes intro-pop{from{opacity:0;transform:var(--rest) translateY(22px) scale(.94)}to{opacity:1;transform:var(--rest) translateY(0) scale(1)}}@keyframes intro-float{0%,100%{transform:var(--rest) translateY(0) rotate(-1.5deg)}50%{transform:var(--rest) translateY(-9px) rotate(1.5deg)}}.game-wizard{display:none}.campaign-page.game-active{display:block;padding:18px 16px 36px;background:linear-gradient(180deg,#0b8ee7 0,#0871c7 52%,#e8f4ff 52%,#e8f4ff 100%)}.campaign-page.game-active .game-wizard{display:block}.campaign-page.game-active .campaign-intro{display:none}@media(max-width:600px){.campaign-intro{width:100%;height:100dvh;min-height:100dvh;background-position:center top}.intro-corner-logo{width:28%;min-width:0}.intro-main-logo{top:7%;width:82%}.intro-left-copy{top:25%;left:4%;width:27%}.intro-rate-copy{top:35%;left:2%;width:40%}.intro-form{top:43%;width:92%}.intro-form-title{width:76%;margin-bottom:-5px}.intro-input-card{gap:9px;padding:22px 13px 16px;border-width:5px;border-radius:24px}.intro-field{grid-template-columns:52px 105px minmax(0,1fr);min-height:47px;border-radius:10px;font-size:.94rem}.intro-field img{width:44px;height:44px;margin-left:4px}.intro-field span{padding:0 6px}.intro-field input{min-height:47px;padding:6px 9px;border-width:2px;border-radius:9px;font-size:1rem}.intro-privacy{right:7%;bottom:13%;left:7%;font-size:.68rem;line-height:1.35}.intro-start{bottom:3%;width:42%;min-width:0}}@media(prefers-reduced-motion:reduce){.intro-pop,.intro-float,.intro-float picture{animation:none;opacity:1}.intro-main-logo,.intro-form,.intro-start{transform:translateX(-50%)}}body.campaign-body{padding:0}.campaign-page{width:100vw;min-width:0;min-height:100dvh}.campaign-intro{width:100vw;min-width:0;height:100dvh;min-height:100dvh}.intro-main-logo{top:7%}.intro-form{top:44%}.intro-privacy{top:85%;right:15%;bottom:auto;left:15%}.intro-start{bottom:1.5%}.intro-left-copy picture{animation:intro-cloud-left 9s cubic-bezier(.77,0,.175,1) calc(var(--delay) + .72s) infinite}.intro-rate-copy picture{animation:intro-cloud-rate 11s cubic-bezier(.77,0,.175,1) calc(var(--delay) + .72s) infinite}@keyframes intro-cloud-left{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}25%{transform:translate3d(12px,-10px,0) rotate(1deg)}50%{transform:translate3d(3px,-19px,0) rotate(0deg)}75%{transform:translate3d(-11px,-7px,0) rotate(-1.5deg)}}@keyframes intro-cloud-rate{0%,100%{transform:translate3d(0,0,0) rotate(1deg)}22%{transform:translate3d(-13px,-13px,0) rotate(-1deg)}52%{transform:translate3d(8px,-23px,0) rotate(1.5deg)}76%{transform:translate3d(15px,-5px,0) rotate(0deg)}}@media(max-width:600px){.intro-main-logo{top:10%}.intro-form{top:45%}.intro-privacy{top:84%;right:6%;left:6%}.intro-start{bottom:1.5%}}@media(prefers-reduced-motion:reduce){.intro-left-copy picture,.intro-rate-copy picture{animation:none}}

/* v5: compact campaign layout and continuous floating motion */
.intro-main-logo{top:6%;width:52%}.intro-form{top:40%;width:68%;max-width:780px}.intro-form-title{width:54%;margin-bottom:-4px}.intro-input-card{gap:8px;padding:20px 8% 14px;border-width:6px}.intro-field{min-height:54px}.intro-field img{width:54px;height:54px}.intro-field input{min-height:54px;font-size:1.32rem}.intro-privacy{top:78.5%;right:15%;bottom:auto;left:15%;font-size:clamp(.65rem,1.1vw,.84rem)}.intro-start{bottom:1.2%}.intro-left-copy picture{animation:intro-cloud-left 9s linear calc(var(--delay) + .72s) infinite}.intro-rate-copy picture{animation:intro-cloud-rate 11s linear calc(var(--delay) + .72s) infinite}
@media(max-width:600px){.intro-corner-logo{width:21%}.intro-main-logo{top:8%;width:73%}.intro-form{top:41%;width:90%}.intro-form-title{width:68%;margin-bottom:-4px}.intro-input-card{gap:8px;padding:14px 12px;border-width:5px}.intro-field{grid-template-columns:52px minmax(0,1fr);min-height:50px}.intro-field span{display:none}.intro-field img{width:50px;height:50px}.intro-field input{min-height:50px;padding:0 14px;font-size:1rem}.intro-field input::placeholder{color:#7a8494;opacity:1;font-weight:600}.intro-privacy{top:73%;right:7%;bottom:auto;left:7%;font-size:.65rem;line-height:1.3}.intro-start{bottom:1%;width:38%}.intro-left-copy picture{animation:intro-cloud-left-mobile 11s linear calc(var(--delay) + .72s) infinite}.intro-rate-copy picture{animation:intro-cloud-rate-mobile 13s linear calc(var(--delay) + .72s) infinite}}
@keyframes intro-cloud-left-mobile{0%{transform:translate3d(0,0,0) rotate(0deg)}25%{transform:translate3d(2px,-3px,0) rotate(.15deg)}50%{transform:translate3d(3px,-1px,0) rotate(0deg)}75%{transform:translate3d(-2px,2px,0) rotate(-.15deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}
@keyframes intro-cloud-rate-mobile{0%{transform:translate3d(0,0,0) rotate(0deg)}25%{transform:translate3d(-2px,-2px,0) rotate(-.1deg)}50%{transform:translate3d(2px,-3px,0) rotate(.1deg)}75%{transform:translate3d(3px,2px,0) rotate(0deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}


/* v6: placeholders only on small screens; mobile icon/input breathing room */
@media(min-width:601px){.intro-field input::placeholder{color:transparent}}
@media(max-width:600px){.intro-field{column-gap:14px}.intro-field input::placeholder{color:#7a8494;opacity:1}}


/* v7: place brand and privacy copy in the upper campaign region. */
.intro-corner-logo{right:auto;left:0}.intro-privacy{top:34%;right:24%;bottom:auto;left:24%;font-size:clamp(.62rem,1vw,.8rem)}.intro-start{bottom:2.5%}@media(max-width:600px){.intro-corner-logo{right:auto;left:0}.intro-privacy{top:28%;right:8%;bottom:auto;left:8%;font-size:.6rem;line-height:1.28}.intro-start{bottom:2%}}


/* v8: reserve a dedicated reading band below the taller campaign logo on tablets and desktops. */
@media(min-width:601px){.intro-privacy{top:43.5%;right:24%;left:24%}.intro-form{top:51%}}


/* v9: keep the floating offer artwork clear of the brand mark on the left. */
.intro-left-copy{right:4%;left:auto}.intro-rate-copy{right:2%;left:auto}@media(max-width:600px){.intro-left-copy{right:4%;left:auto}.intro-rate-copy{right:2%;left:auto}}


/* v10: crop the non-essential balloon cord beyond the right edge. */
.intro-rate-copy{right:-7%}@media(max-width:600px){.intro-rate-copy{right:-10%}}


/* v11: mobile reading band sits below the floating offer artwork. */
@media(max-width:600px){.intro-privacy{top:43%;right:8%;bottom:auto;left:8%}.intro-form{top:53%}}


/* v12: offer artwork is intentionally hidden for this campaign layout. */
.intro-left-copy,.intro-rate-copy{display:none}


/* v13: improve legibility of the privacy notice. */
.intro-privacy{font-size:clamp(.75rem,1.2vw,1rem)}@media(max-width:600px){.intro-privacy{font-size:.75rem;line-height:1.35}}


/* v14: keep a deliberate gap between the privacy notice and the form heading. */
.intro-privacy{padding-bottom:1.75%}@media(min-width:601px){.intro-form{top:53%}}@media(max-width:600px){.intro-privacy{padding-bottom:3%}.intro-form{top:57%}}

.intro-error{position:absolute;top:100%;right:0;left:0;margin:8px 0 0;color:#b00020;font-weight:700;text-align:center;text-shadow:0 1px #fff}.intro-error:empty{display:none}

/* Clear inline validation feedback for the landing form. */
.intro-error{z-index:4;display:block;min-height:0;padding:6px 12px;border-radius:10px;background:#fff4f4;color:#a50018;font-size:clamp(.72rem,1.1vw,.9rem);line-height:1.35;box-shadow:0 2px 8px rgba(80,0,0,.18)}.intro-error:empty{display:none}@media(max-width:600px){.intro-error{margin-top:6px;padding:6px 10px;font-size:.72rem}}

/* Always-visible validation toast for the landing form. */
.intro-error:not(:empty){position:fixed;top:18px;right:50%;left:auto;width:min(88vw,460px);margin:0;transform:translateX(50%);z-index:100;padding:11px 16px;border:2px solid #b00020;background:#fff4f4;color:#a50018;font-size:1rem;font-weight:700;text-align:center;box-shadow:0 5px 16px rgba(80,0,0,.25)}@media(max-width:600px){.intro-error:not(:empty){top:10px;font-size:.86rem}}

/* Desktop: present every campaign view in the iPad Air landscape canvas instead of stretching it across the browser. */
@media(min-width:1181px){
 html,body{min-height:100%;background:#0879dd}
 body.campaign-body{display:grid;min-height:100vh;padding:28px 20px;place-items:center;background:#0879dd}
 body.campaign-body>.customer-shell{width:1180px;height:820px;min-height:820px;overflow:hidden}
 body.campaign-body .campaign-page,body.campaign-body .campaign-page.game-active{position:relative;width:1180px;height:820px;min-height:820px;padding:0;overflow:hidden;background:#0879dd}
 body.campaign-body .campaign-intro{width:1180px;min-width:1180px;height:820px;min-height:820px;background-size:1180px 820px}
}
/* Fine-tune the landing composition: a slightly quieter hero and a clearer pause before the primary action. */
@media(min-width:601px){.intro-main-logo{width:50%}.intro-start{bottom:1%}}
/* Contact details and privacy information for the campaign landing page. */
.intro-guidance,.intro-use-info{position:absolute;z-index:1}.intro-guidance{top:32%;right:6%;left:6%;margin:0;color:#062b71;font:600 clamp(.72rem,1.08vw,.94rem) "Noto Sans Thai",sans-serif;line-height:1.35;text-align:center;white-space:nowrap}.intro-form{top:39%;width:min(68%,780px)}.intro-input-card{gap:8px;padding:16px 8% 14px}.intro-use-info{top:59%;left:50%;width:min(68%,780px);padding:13px 20px;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 4px 14px rgba(6,43,113,.16);color:#173b75;transform:translateX(-50%)}.intro-use-info h2{margin:0 0 7px;font:700 clamp(.76rem,1.15vw,.98rem) "Noto Sans Thai",sans-serif}.intro-use-info ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}.intro-use-info li{display:flex;align-items:center;gap:10px;font:500 clamp(.67rem,.95vw,.82rem) "Noto Sans Thai",sans-serif;line-height:1.25}.intro-use-icon{display:grid;flex:0 0 25px;width:25px;height:25px;border-radius:50%;background:#0a58a9;color:#fff;place-items:center;font-size:.72rem}.intro-privacy{top:80.5%;right:14%;bottom:auto;left:14%;display:flex;align-items:flex-start;justify-content:center;gap:8px;padding:0;color:#062b71;font:600 clamp(.65rem,.92vw,.8rem) "Noto Sans Thai",sans-serif;line-height:1.35;text-align:left}.intro-privacy .bi{flex:0 0 auto;margin-top:1px;font-size:1.15em}.intro-privacy a{color:#062b71;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){.intro-main-logo{top:6%;width:73%}.intro-guidance{top:31%;right:7%;left:7%;font-size:.7rem;line-height:1.35;white-space:normal}.intro-form{top:40%;width:90%}.intro-input-card{gap:7px;padding:12px}.intro-use-info{top:56%;width:90%;padding:10px 13px;border-radius:14px}.intro-use-info h2{margin-bottom:5px;font-size:.72rem}.intro-use-info ul{gap:5px}.intro-use-info li{gap:8px;font-size:.62rem}.intro-use-icon{flex-basis:22px;width:22px;height:22px;font-size:.62rem}.intro-privacy{top:78%;right:7%;left:7%;gap:6px;font-size:.62rem;line-height:1.3}.intro-start{bottom:1%;width:38%}}
@media(min-width:601px){.intro-guidance{top:36%}.intro-form{top:41%}.intro-use-info{top:63%;--rest:translateX(-50%)}}
@media(max-width:600px){.intro-use-info{top:62%;--rest:translateX(-50%)}.intro-privacy{top:80%}}
@media(max-width:600px){.intro-form,.intro-use-info{width:86%}}

.intro-privacy a,.intro-privacy a:hover,.intro-privacy a:focus{text-decoration:none}

@media(min-width:601px){.intro-guidance{top:38%}.intro-use-info{width:min(52%,620px)}.intro-privacy{top:83%}}
@media(max-width:600px){.intro-guidance{top:33%}.intro-use-info{width:82%}.intro-privacy{top:82%}}
@media(min-width:601px){.intro-use-info{width:min(32%,390px);padding:10px 14px}.intro-use-info h2{margin-bottom:5px;font-size:clamp(.7rem,.9vw,.82rem)}.intro-use-info ul{gap:4px}.intro-use-info li{gap:7px;font-size:clamp(.59rem,.73vw,.7rem)}.intro-use-icon{flex-basis:22px;width:22px;height:22px;font-size:.62rem}}

@media(min-width:601px){.intro-use-info{padding:13px 20px}.intro-use-info h2{margin-bottom:7px;font-size:clamp(.76rem,1.15vw,.98rem)}.intro-use-info ul{gap:6px}.intro-use-info li{gap:10px;font-size:clamp(.67rem,.95vw,.82rem)}.intro-use-icon{flex-basis:25px;width:25px;height:25px;font-size:.72rem}}

@media(min-width:601px) and (max-width:1180px) and (max-height:700px){.intro-main-logo{top:1%}.intro-guidance{top:34%}.intro-form{top:38%}.intro-use-info{top:62%}.intro-privacy{top:84%}}

@media(min-width:601px) and (max-width:1180px) and (max-height:700px){.intro-guidance{top:35%}.intro-use-info{top:64%;padding:10px 18px}.intro-use-info h2{margin-bottom:5px}.intro-use-info ul{gap:4px}.intro-privacy{top:86%}}

@media(min-width:601px) and (max-width:1180px) and (max-height:700px){.intro-privacy{top:84.5%}}

/* Keep the corner brand unobtrusive on every campaign screen. */
.intro-corner-logo{width:11%;min-width:80px}@media(max-width:600px){.intro-corner-logo{width:18%;min-width:0}}

/* Intro guidance badge: clear campaign instruction with the supplied blue/yellow visual language. */
.intro-main-logo{width:42%}
.intro-guidance{top:35%;right:auto;left:50%;z-index:2;width:min(76%,860px);padding:8px 20px 9px;border:2px solid #ffd52a;border-radius:12px;background:#062b71;color:#fff;font:700 clamp(.72rem,1.08vw,.95rem) "Noto Sans Thai",sans-serif;line-height:1.35;text-align:center;white-space:normal;box-shadow:0 5px 0 #eb9a00,0 9px 14px rgba(4,34,98,.3);--rest:translateX(-50%);transform:translateX(-50%)}
@media(min-width:601px){.intro-form{top:43%}}
@media(min-width:601px) and (max-width:1180px) and (max-height:700px){.intro-main-logo{top:1.5%;width:40%}.intro-guidance{top:30%;width:74%;padding:7px 16px 8px}.intro-form{top:40%}.intro-use-info{top:64%}.intro-privacy{top:84.5%}}
@media(max-width:600px){.intro-main-logo{top:6%;width:64%}.intro-guidance{top:29%;width:86%;padding:7px 11px 8px;border-radius:10px;font-size:.66rem;line-height:1.3}.intro-form{top:41.5%}}
/* Compact the instruction badge and restore a clear gap between the form and use-information card. */
@media(min-width:601px){
 .intro-guidance{top:35%;width:min(62%,720px);padding:8px 18px 9px;font-size:clamp(.88rem,1.45vw,1.08rem);line-height:1.28}
 .intro-form{top:44%}
 .intro-use-info{top:66%}
}
@media(min-width:601px) and (max-width:1180px) and (max-height:700px){
 .intro-guidance{top:30%;width:min(60%,620px);padding:8px 16px 9px;font-size:clamp(.88rem,1.45vw,1.05rem);line-height:1.28}
 .intro-form{top:41%}
 .intro-use-info{top:66%;padding:8px 16px}
 .intro-use-info h2{margin-bottom:4px}
 .intro-use-info ul{gap:3px}
 .intro-privacy{top:84.5%}
}
/* Keep the Thai instruction together on the iPad landscape canvas. */
@media(min-width:601px){.intro-guidance{width:min(68%,760px);white-space:nowrap}}
@media(min-width:601px) and (max-width:1180px) and (max-height:700px){.intro-guidance{width:min(70%,720px);white-space:nowrap}}
/* Rebalance the compact iPad stack: reduce the hero-to-form gap and restore space around the information card. */
@media(min-width:601px) and (max-width:1180px) and (max-height:700px){
 .intro-form{top:39%}
 .intro-use-info{top:66%;padding:6px 16px}
 .intro-use-info h2{margin-bottom:3px}
 .intro-use-info ul{gap:2px}
 .intro-use-info li{line-height:1.16}
 .intro-use-icon{flex-basis:21px;width:21px;height:21px}
 .intro-privacy{top:84.5%}
}
@media(min-width:601px) and (max-width:1180px) and (max-height:700px){.intro-guidance{width:min(72%,740px);font-size:clamp(1rem,1.6vw,1.15rem)}}
@media(min-width:601px) and (max-width:1180px) and (max-height:700px){.intro-privacy{top:83.25%}}
/* iPad privacy-use summary: a single, unobtrusive information row without a card surface. */
@media(min-width:601px){
 .intro-use-info{top:66%;width:92%;padding:0;border-radius:0;background:transparent;box-shadow:none;text-align:center}
 .intro-use-info h2{margin:0 0 7px;font-size:clamp(.9rem,1.35vw,1.12rem)}
 .intro-use-info ul{display:flex;align-items:center;justify-content:center;gap:0;width:100%;white-space:nowrap}
 .intro-use-info li{flex:0 1 auto;gap:8px;font-size:clamp(.76rem,1.12vw,.96rem);line-height:1.2}
 .intro-use-info li+li{margin-inline-start:13px;padding-inline-start:13px;border-inline-start:2px solid #062b71}
 .intro-use-icon{flex:0 0 28px;width:28px;height:28px;font-size:.82rem}
}

/* v15: one final landing-page layout override, kept after older experiments. */
@media(min-width:601px){
 .intro-main-logo{top:5%;width:46%}
 .intro-guidance{top:38%}
 .intro-form{top:47%}
 .intro-use-info{top:72%}
 .intro-privacy{top:84.5%}
}
@media(max-width:600px){
 .intro-main-logo{top:7%;width:68%}
 .intro-guidance{top:31%}
 .intro-form{top:44%}
 .intro-use-info{top:66%}
 .intro-privacy{top:84%}
}
@media(max-width:600px) and (max-height:700px){
 .intro-main-logo{top:5%;width:66%}
 .intro-guidance{top:30%}
 .intro-form{top:43%}
 .intro-use-info{top:66%}
 .intro-privacy{top:82.5%}
}

/* iPad Air landscape: a compact, two-column information block with the final item centred. */
@media (min-width: 601px) {
 .intro-main-logo{top:2%;width:42%}
 .intro-guidance{top:33%;width:min(76%,900px);padding:8px 20px 9px;font-size:clamp(.86rem,1.25vw,1.04rem);white-space:normal}
 .intro-form{top:40%;width:min(68%,780px)}
 .intro-use-info{top:63%;width:min(72%,820px);padding:0;background:transparent;box-shadow:none;text-align:center}
 .intro-use-info h2{margin:0 0 9px;font-size:clamp(1.12rem,1.65vw,1.38rem)}
 .intro-use-info ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:9px 30px;white-space:normal}
 .intro-use-info li{width:max-content;max-width:100%;gap:9px;font-size:clamp(.98rem,1.4vw,1.16rem);line-height:1.3;text-align:left}
 .intro-use-info li+li{margin:0;padding:0;border:0}
 .intro-use-info li:nth-child(3){grid-column:1 / -1;justify-self:center}
 .intro-use-icon{flex:0 0 30px;width:30px;height:30px;font-size:.86rem}
 .intro-privacy{top:80%;right:13%;left:13%;font-size:clamp(.85rem,1.15vw,1rem)}
 .intro-start{bottom:1.5%}
}

@media (min-width: 601px) and (max-width: 1180px) and (max-height: 700px) {
 .intro-main-logo{top:1.5%;width:36%}
 .intro-guidance{top:29%;width:min(78%,800px);font-size:clamp(.78rem,1.25vw,.98rem)}
 .intro-form{top:39%}
 .intro-use-info{top:64%}
 .intro-use-info ul{gap:7px 22px}
 .intro-use-info li{font-size:clamp(.66rem,.96vw,.82rem)}
 .intro-privacy{top:80%;}
 .intro-start{bottom:.5%}
}