/* Safe-area, narrow screens, longer translations and Safari 12 fallbacks. */
.f-shell,.mobile-discovery .m-shell{min-height:100vh;min-height:100svh}
.language-picker{max-width:100px;width:100px;min-height:35px;padding:5px 7px;background:#292e34;color:#e5cad7;border:1px solid #9b7d8e55;border-radius:7px;font-size:11px;flex-shrink:0;margin-left:10px}
.f-header-spark{display:none}.f-brand,.m-brand{min-width:0}.f-brand span,.m-brand span{max-width:95px;line-height:1.4;letter-spacing:0}.f-header .f-back{order:2;margin-left:4px}.m-header-heart{order:2}.f-header,.m-header{gap:6px}.f-brand,.m-brand{flex:1;gap:8px}.f-brand span,.m-brand span{padding-left:8px}
.m-intro h1{white-space:normal}.f-intro h1,.m-intro h1{overflow-wrap:break-word}.f-intro h1{font-size:clamp(27px,8.5vw,38px)}.m-intro h1{font-size:clamp(24px,7.5vw,32px)}.m-intro h1 em{display:block}.m-gender-bar>span,.f-preference-title>span{max-width:45%;text-align:right;line-height:1.6}.m-gender button{min-width:0;padding:0 12px}.f-eyebrow,.m-eyebrow{letter-spacing:.5px;line-height:1.6}.m-bottom-nav button{font-size:10px;letter-spacing:0}.m-contact-heading h2{overflow-wrap:break-word}.m-contact-field select{flex-basis:115px}.m-contact-choice b{white-space:normal;text-align:center}.m-contact-submit{white-space:normal;line-height:1.5}.f-more-menu .f-browser-row strong{font-size:10px;line-height:1.2}.f-more-menu .f-browser-row{min-height:36px}.m-toast,.f-toast{white-space:normal;text-align:center;max-width:90%;width:max-content}
.m-dialog,.mobile-discovery dialog.m-contact-dialog{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}.mobile-discovery dialog.m-dialog{top:0;right:0;bottom:0;left:0}.m-dialog:not([open]){display:none}.legacy-dialog[open]{display:block;z-index:30}.legacy-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:29;background:rgba(5,7,10,.8)}.legacy-backdrop[hidden]{display:none}
@media(max-width:600px){.mobile-discovery dialog.m-contact-dialog{top:auto;bottom:0;left:0;right:0;max-height:calc(100vh - 10px);max-height:calc(100dvh - 10px)}}
@supports not (aspect-ratio:1){.m-spotlight-open{height:0;padding-top:108%}.m-open-photo,.m-card .m-open-photo{height:0;padding-top:136.67%}.m-profile-photo{height:0;padding-top:106%;position:relative}.m-spotlight-open>img,.m-open-photo>img,.m-profile-photo>img{position:absolute;top:0;left:0;width:100%;height:100%}.f-motion{height:0;padding-top:94.286%}.m-photo-shade{top:0;right:0;bottom:0;left:0}.m-spotlight-info{top:auto;right:19px;bottom:21px;left:19px}.f-demo-arrow{top:0;left:0}.f-menu-dots:after{top:-2px;right:-2px;bottom:-2px;left:-2px}.f-browser-row:after{top:-2px;right:-8px;bottom:-2px;left:-8px}}
@supports not (font-size:clamp(1px,2vw,3px)){.f-intro h1{font-size:32px}.m-intro h1{font-size:27px}}
/* Use margins for flex spacing: iOS 12 does not support flex gap. */
.m-contact-input-row{gap:0}.m-contact-input-row select{margin-right:8px}.m-contact-person{gap:0}.m-contact-person>img{margin-right:11px}.f-steps li{gap:0}.f-steps li>span{margin-right:15px}
[dir=rtl] .m-caption,[dir=rtl] .m-contact-heading,[dir=rtl] .f-intro{text-align:right}[dir=rtl] .language-picker{margin-left:0;margin-right:10px}[dir=rtl] .m-contact-input-row{direction:ltr}[dir=rtl] .m-contact-person>img{margin-right:0;margin-left:11px}[dir=rtl] .f-steps li>span{margin-right:0;margin-left:15px}[dir=rtl] .m-gender-bar>span,[dir=rtl] .f-preference-title>span{text-align:left}[dir=rtl] .m-contact-back svg,[dir=rtl] .f-back svg{transform:scaleX(-1)}[dir=rtl] input[type=email],[dir=rtl] input[type=tel]{direction:ltr;text-align:left}
@media(max-width:360px){.f-brand span,.m-brand span{display:none}.language-picker{max-width:96px}.m-contact-input-row select{flex-basis:105px}.f-guide .f-intro h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.f-motion *{animation:none!important}}

/* iOS 12: replace flex gap where it affects touch targets and the countdown. */
.m-contact-header{gap:0}.m-contact-header>.m-contact-close{margin-left:8px}
.f-primary,.m-profile-save,.m-contact-submit{gap:0}.f-primary>svg,.m-contact-submit>svg{margin-left:14px}.m-profile-save>svg{margin-right:12px}
.f-steps{gap:0}.f-steps li+li{margin-top:17px}.f-guide-actions{gap:0}.f-guide-actions>*+*{margin-top:11px}
[dir=rtl] .m-contact-header>.m-contact-close{margin-left:0;margin-right:8px}
@media(max-width:600px){.m-dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0b0c10d9}}
