/* DP World ILT20 Season 5 Brand Guidelines: Cutmark Narrow only (Light body, NrDemi subheads, NrXBold headlines),
   primary purple #38004F and pink #F00080, secondary purple #610886, white, green #B9E249 as an accent only */
@font-face{font-family:"Cutmark";src:url("fonts/Cutmark-Light.ttf") format("truetype");font-weight:100 449;font-display:swap;}
@font-face{font-family:"Cutmark";src:url("fonts/Cutmark-NrDemi.ttf") format("truetype");font-weight:450 649;font-display:swap;}
@font-face{font-family:"Cutmark";src:url("fonts/Cutmark-NrXBold.ttf") format("truetype");font-weight:650 1000;font-display:swap;}
:root{--purple:#38004F;--pink:#F00080;--violet:#610886;--white:#FFFFFF;--green:#B9E249;color-scheme:dark;}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--purple);color:var(--white);font-family:"Cutmark",sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;}

.page{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;overflow:clip;display:flex;flex-direction:column;
  padding:28px max(20px, env(safe-area-inset-right, 0px)) 28px max(20px, env(safe-area-inset-left, 0px));
  background:radial-gradient(60% 50% at 20% 10%, #610886 0%, rgba(97,8,134,0) 100%), var(--purple);}
.hero{position:absolute;right:-22%;top:-26%;width:min(90vw, 1000px);max-width:none;transform:rotate(18deg);opacity:0.28;pointer-events:none;user-select:none;}

.top{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;}
.logo{display:block;height:72px;width:auto;}

.stage{position:relative;z-index:1;width:100%;max-width:1180px;margin:auto;padding-block:36px 24px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(32px, 5vw, 72px);align-items:center;}

.eyebrow{margin:0;font-weight:500;font-size:15px;letter-spacing:2.6px;text-transform:uppercase;color:var(--pink);}
.title{margin:12px 0 0;font-weight:800;font-size:clamp(56px, 8.4vw, 112px);line-height:0.88;text-transform:uppercase;letter-spacing:0.5px;}
.lede{margin:20px 0 0;max-width:30em;font-weight:300;font-size:clamp(18px, 1.6vw, 21px);line-height:1.45;color:rgba(255,255,255,0.86);}
.players{display:block;width:100%;height:auto;margin-top:28px;
  -webkit-mask-image:linear-gradient(to bottom, #000 86%, transparent 100%);mask-image:linear-gradient(to bottom, #000 86%, transparent 100%);}

/* the form: white card so purple text and the pink button read cleanly */
.card{background:var(--white);color:var(--purple);border-radius:22px;padding:clamp(24px, 3vw, 36px);box-shadow:0 28px 70px rgba(20,0,30,0.5);}
.form{display:grid;gap:16px;}
.cardEyebrow{margin:0;font-weight:500;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--pink);}
.cardTitle{margin:-8px 0 6px;font-weight:800;font-size:clamp(34px, 3.4vw, 44px);line-height:0.95;text-transform:uppercase;color:var(--purple);}
.cardText{margin:12px 0 0;font-weight:300;font-size:19px;line-height:1.45;color:var(--purple);}
.field{display:grid;gap:7px;}
.label{font-weight:500;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--purple);}
.input{width:100%;height:56px;padding:0 16px;border-radius:12px;border:1.5px solid rgba(56,0,79,0.22);background:var(--white);color:var(--purple);
  font:inherit;font-weight:300;font-size:19px;outline:none;transition:border-color .15s, box-shadow .15s;}
.input::placeholder{color:rgba(56,0,79,0.45);}
.input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(240,0,128,0.18);}
.phone{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;}
.code{width:auto;max-width:150px;padding-right:34px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, #38004F 50%), linear-gradient(135deg, #38004F 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.btn{height:58px;margin-top:6px;border:0;border-radius:12px;background:var(--pink);color:var(--white);font:inherit;font-weight:800;font-size:20px;letter-spacing:1.4px;
  text-transform:uppercase;cursor:pointer;transition:transform .15s, box-shadow .15s;box-shadow:0 10px 24px rgba(240,0,128,0.3);}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(240,0,128,0.4);}
.btn:focus-visible{outline:3px solid var(--purple);outline-offset:3px;}
.btn:disabled{opacity:0.75;cursor:default;transform:none;}
.err{margin:0;padding:11px 14px;border-radius:10px;border-left:4px solid var(--pink);background:rgba(240,0,128,0.08);font-size:16px;line-height:1.35;color:var(--purple);}
.fine{margin:2px 0 0;font-weight:300;font-size:14px;line-height:1.45;color:rgba(56,0,79,0.72);}
.done{padding-block:8px;}
.done:focus{outline:none;}

/* validation states (not in the reference design; built from its own colours) */
.input[aria-invalid="true"]{border-color:var(--pink);background-color:rgba(240,0,128,0.04);}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(240,0,128,0.25);}
.fieldErr{margin:0;font-weight:500;font-size:15px;line-height:1.3;color:#C2006A;}
.fieldErr::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;border-radius:50%;background:var(--pink);vertical-align:middle;}
.btn[aria-busy="true"]{cursor:progress;}

/* opt-out page: checkboxes and saved message */
.who{margin:-4px 0 4px;font-size:17px;color:rgba(56,0,79,0.72);}
.check{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;
  border:1.5px solid rgba(56,0,79,0.22);border-radius:12px;cursor:pointer;transition:border-color .15s, background-color .15s;}
.check:hover{border-color:rgba(56,0,79,0.4);}
.check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.checkBox{width:28px;height:28px;border-radius:8px;border:1.5px solid rgba(56,0,79,0.4);background:var(--white);
  display:grid;place-items:center;transition:background-color .15s, border-color .15s;}
.checkBox::after{content:"";width:12px;height:7px;border-left:3px solid var(--white);border-bottom:3px solid var(--white);
  transform:translateY(-2px) rotate(-45deg);opacity:0;}
.check input:checked + .checkBox{background:var(--pink);border-color:var(--pink);}
.check input:checked + .checkBox::after{opacity:1;}
.check:has(input:checked){border-color:var(--pink);background:rgba(240,0,128,0.04);}
.check input:focus-visible + .checkBox{box-shadow:0 0 0 3px rgba(240,0,128,0.3);}
.checkText{font-weight:300;font-size:18px;line-height:1.3;color:var(--purple);}
.ok{margin:0;padding:11px 14px;border-radius:10px;border-left:4px solid var(--violet);background:rgba(97,8,134,0.08);font-size:16px;line-height:1.35;color:var(--purple);}
.top a{display:inline-block;}

/* Cloudflare Turnstile widget slot */
.captcha{min-height:65px;}
.captchaBox{width:100%;min-height:65px;}

.done .cardTitle{margin:10px 0 0;}

.foot{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.lockup{display:block;width:min(420px, 100%);max-width:100%;height:auto;}
.tags{margin:0;font-weight:500;font-size:14px;letter-spacing:1.2px;color:rgba(255,255,255,0.75);}

@media (max-width: 900px){
  .page{padding-top:20px;}
  .logo{height:56px;}
  .hero{right:-45%;top:-12%;width:130vw;}
  .stage{grid-template-columns:minmax(0,1fr);padding-block:24px 28px;gap:8px;}
  .players{margin-top:20px;}
  .card{margin-top:-6px;}
  .foot{flex-direction:column;align-items:flex-start;}
}
@media (max-width: 380px){
  .page{padding-inline:max(16px, env(safe-area-inset-left, 0px));}
  .card{padding:20px 16px;}
  .code{max-width:112px;padding:0 28px 0 12px;font-size:17px;background-position:calc(100% - 16px) 50%, calc(100% - 10px) 50%;}
  .input{font-size:17px;}
  .title{font-size:clamp(48px, 16vw, 56px);}
}
[hidden]{display:none !important;}