/* Compact first screen: introduction, success ribbon, then benefits. */
.hero,.hero-inner{min-height:430px}
.hero-copy{width:64%;padding:24px 0}
.hero .eyebrow{margin-bottom:18px}
.hero h1{font-size:clamp(43px,4vw,58px);line-height:1.07;letter-spacing:-2.7px}
.hero h1 em{margin-top:5px;white-space:nowrap}
.hero h1 em:after{height:4px;bottom:-9px;right:6px}
.hero-copy>p{font-size:19px;line-height:1.55;margin-top:25px}
.hero-actions{margin-top:21px}
.hero-note{margin-top:20px}
.hero-ticket{top:23px;right:88px;transform:rotate(5deg) scale(.77);transform-origin:top right}
.hero-photo{width:53%;background-position:75% 62%}
.success-section{padding:13px 0 17px;background:var(--cream)}
.success-ribbon{min-height:112px;padding:12px 28px;gap:24px}
.success-heading{min-height:68px;gap:15px}
.success-heading h2{font-size:22px}
.success-trophy{width:49px;height:49px}
.success-result{font-size:19px}
.success-result>strong{font-size:24px}
.success-medal{width:90px;height:87px}
.success-medal>span{font-size:51px}
.success-note{font-size:13px;line-height:1.5}
.principles-inner{min-height:104px}
@media(max-width:1200px){
 .hero,.hero-inner{min-height:420px}
 .hero-copy{width:65%;padding:24px 0}
 .hero h1{font-size:clamp(43px,4.2vw,52px);letter-spacing:-2.5px}
 .hero-ticket{right:45px;top:24px;transform:rotate(5deg) scale(.76)}
 .hero-copy>p{font-size:18px}
 .success-ribbon{gap:18px;padding:13px 23px}
 .success-heading{gap:12px;padding-right:14px}
 .success-heading h2{font-size:21px}
 .success-trophy{width:44px;height:44px}
 .success-result{font-size:17px}
 .success-result>strong{font-size:22px}
 .success-medal{width:84px;height:84px}
 .success-medal>span{font-size:48px}
 .success-note{font-size:12px;padding-left:20px}
}
@media(min-width:901px) and (max-width:1050px){
 .success-ribbon{grid-template-columns:1fr 1.6fr .63fr 1.25fr}
 .success-note{grid-column:auto;border-top:0;border-left:1px solid #00ca7c;max-width:none;padding:0 0 0 18px;line-height:1.5}
 .success-ribbon:before,.success-ribbon:after{transform:skewX(-4deg)}
}
@media(max-width:960px){
 .hero,.hero-inner{min-height:420px}
 .hero-copy{width:66%;padding:23px 0}
 .hero h1{font-size:42px;letter-spacing:-2.4px}
 .hero-copy>p{font-size:17px;margin-top:22px}
 .hero-actions{margin-top:18px;gap:13px}
 .hero-actions .button{padding:13px 16px}
 .hero-note{margin-top:16px}
 .hero-ticket{right:16px;top:31px;transform:rotate(5deg) scale(.79)}
}
@media(min-width:701px) and (max-height:760px){
 .site-header{height:82px}
 .mobile-nav{top:82px}
 .hero,.hero-inner{min-height:370px}
 .hero-copy{padding:18px 0}
 .hero .eyebrow{margin-bottom:12px;font-size:10px}
 .hero h1{font-size:clamp(41px,3.8vw,52px)}
 .hero-copy>p{font-size:17px;line-height:1.5;margin-top:18px}
 .hero-actions{margin-top:16px}
 .hero-actions .button{padding-top:12px;padding-bottom:12px;font-size:14px}
 .hero-note{margin-top:12px;font-size:10px}
 .hero-ticket{top:14px;transform:rotate(5deg) scale(.69)}
 .success-section{padding-top:11px;padding-bottom:13px}
 .principles-inner{min-height:94px}
}
@media(max-width:900px) and (min-width:701px){
 .success-ribbon{grid-template-columns:1fr 1.75fr .7fr;gap:13px 20px;padding:16px 24px}
 .success-heading{min-height:70px}
 .success-heading h2{font-size:21px}
 .success-result{font-size:18px}
 .success-result>strong{font-size:23px}
 .success-medal{width:83px;height:83px}
 .success-note{grid-column:1/-1;border-left:0;border-top:1px solid #00ca7c55;padding:10px 0 0;font-size:12px;line-height:1.55}
}
@media(max-width:700px){
 .hero{min-height:0}
 .hero-inner{min-height:0;padding-top:23px;padding-bottom:194px}
 .hero-copy{width:100%;padding:0}
 .hero .eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:13px}
 .hero h1{font-size:clamp(32px,8.7vw,42px);line-height:1.08;letter-spacing:-1.8px}
 .hero h1 em{margin-top:4px;white-space:nowrap}
 .hero h1 em:after{height:3px;bottom:-6px}
 .hero-copy>p{font-size:16px;line-height:1.55;margin-top:19px}
 .hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:15px;margin-top:17px}
 .hero-actions .button{font-size:12px;padding:12px 13px;gap:10px}
 .hero-actions .text-link{font-size:11px;gap:6px}
 .hero-note{display:none}
 .hero-photo{width:100%;height:182px;top:auto;bottom:0;background-position:75% 66%}
 .hero-ticket{width:202px;top:auto;left:14px;right:auto;bottom:7px;padding:10px 12px;transform:rotate(-4deg);transform-origin:center}
 .ticket-mini,.ticket-bottom{display:none}
 .hero-ticket figcaption>strong{font-size:22px;line-height:1.2;margin-top:0;letter-spacing:-.8px}
 .ticket-ball{font-size:25px}
 .ticket-meta{font-size:6px;line-height:1.4;padding:5px 0;margin-top:3px}
 .ticket-head,.ticket-row{grid-template-columns:1fr 18px 18px 18px;gap:4px}
 .ticket-head{font-size:9px;padding:6px 0 4px}
 .ticket-head>span:first-child{font-size:6px}
 .hero-ticket .ticket-row{padding:3px 0}
 .hero-ticket .ticket-row>span{font-size:8px}
 .ticket-row small{font-size:6px;margin-right:3px}
 .ticket-row>b{width:18px;height:18px;line-height:16px;font-size:12px}
 .hero-ticket .ticket-row:nth-last-of-type(2),.hero-ticket .ticket-row:nth-last-of-type(3){display:none}
 .success-section{padding-top:12px;padding-bottom:16px}
 .success-ribbon{grid-template-columns:1fr 64px;padding:16px 19px;gap:12px 10px}
 .success-heading{min-height:60px;gap:11px;padding-right:0}
 .success-heading h2{font-size:21px;line-height:1.1}
 .success-trophy{width:39px;height:39px}
 .success-medal{width:64px;height:64px}
 .success-medal>span{font-size:37px}
 .success-result{font-size:17px;padding-top:11px}
 .success-result>strong{font-size:22px;line-height:1.1}
 .success-result>span{margin-top:5px;line-height:1.25}
 .success-note{grid-column:1/-1;padding:10px 0 0;font-size:12px;line-height:1.5}
 .principles-inner{min-height:105px}
}
@media(max-width:380px){
 .hero .eyebrow{font-size:8px}
 .hero h1{font-size:31px;letter-spacing:-1.7px}
 .hero-copy>p{font-size:15px}
 .hero-actions{gap:12px}
 .hero-actions .button{font-size:11px;padding:12px}
 .hero-actions .text-link{font-size:10px}
 .hero-ticket .ticket-row>span{font-size:8px!important}
 .success-ribbon{padding:15px 17px;grid-template-columns:1fr 59px}
 .success-heading h2{font-size:20px}
 .success-trophy{width:36px;height:36px}
 .success-medal{width:59px;height:59px}
 .success-medal>span{font-size:34px}
 .success-result>strong{font-size:21px}
 .success-result{font-size:16px}
}
/* Keep the wide success ribbon shifted toward the right on desktop. */
.success-section>.container{width:calc(100% - 80px);max-width:1600px;margin-left:auto;margin-right:24px}
.success-ribbon{width:100%;margin-left:auto;margin-right:auto}
@media(max-width:700px){.success-section>.container{width:calc(100% - 40px);margin-left:auto;margin-right:auto}}
@media(max-width:380px){.success-section>.container{width:calc(100% - 32px);margin-left:auto;margin-right:auto}}

/* Keep the Mikasa wordmark visible beside the quiniela card. */
@media(min-width:1201px){.hero-ticket{right:112px}}
/* Slightly larger type in the benefits strip, as requested. */
.principles-inner>p{font-size:19px}
.principles strong{font-size:17px}
.principles small{font-size:15px}
@media(max-width:1200px){.principles strong{font-size:15px}.principles small{font-size:13px}}
@media(max-width:700px){.principles strong{font-size:14px}.principles small{font-size:12px}}