@font-face { font-family: 'Atyp Display'; src: url('./assets/fonts/atyp-display-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atyp Display'; src: url('./assets/fonts/atyp-display-medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Editorial New'; src: url('./assets/fonts/pp-editorial-new-ultralight-italic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
:root { --coral: #fb4652; --ink: #191919; --muted: #b8b8b8; color-scheme: dark; font-family: 'Atyp Display', Helvetica, Arial, sans-serif; font-weight: 400; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: white; }
main { position: relative; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--coral); outline-offset: 5px; }
h1, h2, p { margin: 0; }
h1:focus { outline: none; }
em { font-family: 'PP Editorial New', Baskerville, serif; font-weight: 200; font-style: italic; letter-spacing: -.04em; }
.site-header { position: absolute; z-index: 20; top: 34px; left: 2.43%; right: 3%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 25px; align-items: flex-end; color: inherit; text-decoration: none; }
.brand span { color: var(--coral); text-transform: uppercase; font-size: 14px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.brand-dark { display: none; }
body[data-screen='prehome'] .brand-dark { display: block; }
body[data-screen='prehome'] .brand-light { display: none; }
.text-button { background: none; border: 0; color: inherit; padding: 8px 0; font-size: 12px; text-underline-offset: 4px; }
.text-button:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.screen { position: relative; min-height: 100svh; }
.pill { min-height: 64px; padding: 16px 27px; border-radius: 45px; border: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 500; letter-spacing: -.03em; text-align: center; text-decoration: none; }
.pill:hover:not(:disabled) { filter: brightness(.92); }
.coral { background: var(--coral); color: white; }
.coral:hover:not(:disabled) { background: #000; filter: none; }
.primary { background: white; color: var(--ink); }
.prehome-screen { display: grid; grid-template-columns: minmax(0, 1.29fr) minmax(0, 1fr); gap: 3.1vw; padding: 19px 20px 19px 30px; background: white; color: #000; }
.prehome-story { padding-top: 95px; padding-bottom: 35px; }
.prehome-story h1 { font-size: clamp(50px, 6.94vw, 112px); font-weight: 500; line-height: .9; letter-spacing: -.04em; }
.prehome-story h1 > span { display: block; white-space: nowrap; }
.prehome-story h1 em { letter-spacing: -.04em; }
.prehome-copy { font-size: clamp(16px, 1.39vw, 23px); line-height: 1.2; letter-spacing: -.04em; margin: 43px 5px 55px; }
.prehome-copy strong { font-weight: 500; }
.prehome-story .pill { width: 311px; max-width: 100%; }
.prehome-gallery { display: grid; grid-template-columns: 221fr 353fr; grid-template-rows: 331fr 396fr; gap: 20px; aspect-ratio: 592 / 747; height: auto; align-self: start; }
.prehome-gallery > img, .prehome-passes { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 20px; }
.prehome-lido { grid-column: 1 / -1; }
.prehome-passes { position: relative; overflow: hidden; }
.prehome-passes img { position: absolute; width: 102.14%; height: 163.13%; left: -.08%; top: -10.22%; }
.landing-screen { overflow-x: clip; overflow-y: visible; min-height: max(100svh, 784px); padding: 115px 30px 40px; }
.landing-background { position: absolute; inset: 0; z-index: -1; }
.landing-background > img { width: 100%; height: 100%; object-fit: cover; }
.landing-background::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .7); }
.landing-screen h1 { font-size: clamp(60px, 6.94vw, 112px); line-height: .9; font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.landing-story { width: 28%; margin-top: 45px; }
.intro-copy { max-width: 340px; font-size: clamp(19px, 1.736vw, 28px); line-height: 1.2; letter-spacing: -.04em; }
.prize-numbers { position: relative; display: flex; gap: 25px; margin-top: 90px; }
.prize-numbers strong { display: block; color: var(--coral); font-size: clamp(64px, 6.94vw, 112px); line-height: .83; font-weight: 500; letter-spacing: -.07em; }
.prize-numbers div > span { display: block; font-size: 12px; text-transform: uppercase; margin-top: 15px; white-space: nowrap; }
.prize-numbers b { display: block; font-size: 26px; text-transform: none; font-weight: 500; letter-spacing: -.04em; }
.prize-ampersand { position: absolute; left: 145px; top: -35px; color: #ffffff4d; font: italic 200 150px/.83 'PP Editorial New', Baskerville, serif; }
.landing-kit { position: absolute; top: 31.4%; left: 29.6%; width: 19.24%; height: auto; }
.landing-outline { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; }
.landing-action { position: absolute; left: 57.78%; top: 51.8%; width: 35.8%; }
.landing-action > p { font-size: clamp(19px, 1.67vw, 27px); letter-spacing: -.04em; margin-bottom: 26px; }
form { position: relative; }
.input-box { display: flex; align-items: center; width: 393px; max-width: 100%; height: 64px; padding-right: 6px; background: white; color: #000; border-radius: 45px; }
.input-box:focus-within { outline: 2px solid var(--coral); outline-offset: 4px; }
.input-box input { min-width: 0; width: 100%; height: 100%; padding: 16px 0 16px 27px; border: 0; border-radius: 45px; background: transparent; color: #000; font-size: clamp(18px, 1.67vw, 24px); letter-spacing: -.04em; outline: none; }
.input-box input::placeholder { opacity: 1; color: #191919; }
.next-button { display: grid; place-items: center; padding: 0; flex-shrink: 0; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--coral); }
.field-note { font-size: 11px; line-height: 1.4; color: #ddd; margin-top: 12px; max-width: 430px; }
.form-error { margin-top: 13px; max-width: 430px; padding: 12px 15px; border-radius: 10px; background: #191919ed; color: #ffb6bc; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.address-suggestions { position: absolute; top: 72px; left: 0; width: 393px; max-width: 100%; z-index: 30; border-radius: 18px; color: #000; background: white; box-shadow: 0 8px 30px #0005; overflow: hidden; }
#address-options { padding: 0; margin: 0; list-style: none; max-height: 230px; overflow-y: auto; }
#address-options button { display: block; width: 100%; border: 0; padding: 13px 18px; text-align: left; font-size: 14px; line-height: 1.4; background: white; color: #000; }
#address-options button:hover, #address-options button[aria-selected='true'] { background: #eee; }
.places-attribution { display: block; border-top: 1px solid #0003; padding: 10px 18px; font-size: 12px; color: #555; }
.map-stage { position: absolute; inset: 0; min-height: 100svh; isolation: isolate; }
#map { width: 100%; height: 100%; }
/* Leave the bottom edge clear so Google's attribution stays visible. */
.map-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / .72), rgb(0 0 0 / .55) 50%, rgb(0 0 0 / .72)); mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent calc(100% - 12px)); }
.map-route { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.map-route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.route-pending, .route-completed, .map-lido-outline { fill: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.route-pending { stroke: #fff; stroke-dasharray: 3 5; }
.route-completed { stroke: var(--coral); }
.map-lido-outline { stroke: var(--coral); stroke-dasharray: none; vector-effect: non-scaling-stroke; }
.map-route.is-complete .route-pending { visibility: hidden; }
.map-stage :is(.map-heading, .distance-badge, .map-status) { z-index: 3; }
.map-heading, .result-heading { position: absolute; top: 115px; left: 2.22%; }
.map-heading img, .result-heading img { width: min(27vw, 430px); height: auto; }
.distance-badge { position: absolute; top: 235px; left: 2.43%; width: 390px; max-width: 33%; }
.distance-badge > strong { display: block; font-size: 40px; line-height: 1.2; font-weight: 500; letter-spacing: -.04em; }
.distance-badge > p { font-size: 20px; line-height: 1.5; letter-spacing: -.04em; }
.map-personalization { position: relative; width: 355px; max-width: 100%; padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid transparent; background-position: left bottom; }
.map-personalization > div:first-child { max-width: calc(100% - 89px); }
.map-name { color: var(--coral); font-size: 40px; line-height: 1.21; font-weight: 500; letter-spacing: -.04em; overflow-wrap: anywhere; }
.map-sport { font-size: 20px; line-height: 1.5; letter-spacing: -.04em; }
.summary-activity-icon { position: absolute; top: 16px; right: -9px; width: 65px; height: 61px; overflow: hidden; }
.summary-activity-icon img { position: absolute; width: 653.26%; height: 762.07%; left: -529.35%; top: -41.38%; max-width: none; filter: url('#summary-icon-alpha'); }
.summary-activity-icon[data-activity='run'] img { left: -23.23%; }
.summary-activity-icon[data-activity='strength'] img { top: -396.56%; }
.summary-activity-icon[data-activity='balance'] img { left: -281.51%; top: -518.95%; }
body[data-screen='email-screen'] .distance-badge { top: 203px; left: 2.29%; width: 449px; max-width: 36%; color: #e1e1e1; }
.map-personalization, body[data-screen='email-screen'] .travel-times { background-image: url('./assets/summary-divider.svg'); background-repeat: repeat-x; background-size: auto 1px; background-origin: border-box; }
body[data-screen='email-screen'] .travel-times { width: 355px; max-width: 100%; margin-top: 10px; border-top-color: transparent; background-position: left top; }
.travel-times { display: flex; justify-content: space-between; gap: 18px; padding-top: 16px; margin: 12px 0 0; border-top: 1px solid #ffffff70; }
.travel-times div { min-width: 0; }
.travel-times dt { font-size: 12px; margin-bottom: 5px; color: #c8c8c8; }
.travel-times dd { margin: 0; font-size: 16px; }
.travel-times .travel-time-error { font-size: 11px; color: #ffb6bc; }
.map-status { position: absolute; top: 80px; left: 2.43%; background: #191919ed; padding: 12px; border-radius: 8px; font-size: 12px; }
.map-label { position: absolute; z-index: 3; pointer-events: none; transform: translate(-100%, -50%); width: 120px; padding-right: 20px; font-size: 12px; text-align: right; text-shadow: 0 1px 5px #000; overflow-wrap: anywhere; }
.map-label.origin-marker { padding-right: 28px; }
.map-origin-point { position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); }
.panel-screen { padding: 151px 5.5% 65px 62.36%; pointer-events: none; }
.form-panel { position: relative; pointer-events: auto; width: 100%; max-width: 490px; }
.form-panel h1 { font-size: clamp(23px, 2.083vw, 34px); line-height: 1.2; font-weight: 400; letter-spacing: -.04em; max-width: 470px; }
.activity-fieldset { min-width: 0; padding: 0; border: 0; margin: 44px 0 40px; }
.activity-options { display: flex; justify-content: space-between; gap: 18px; }
.activity-option { position: relative; flex: 1; min-width: 0; max-width: 100px; }
.activity-option input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.activity-circle { position: relative; width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 50%; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.activity-option .activity-circle { width: 100%; height: auto; aspect-ratio: 1; font-size: clamp(8px, .77vw, 11px); }
.activity-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.activity-icon { width: 44px; height: 42px; object-fit: fill; filter: url('#activity-icon-alpha'); pointer-events: none; }
.activity-option .activity-icon { width: 44%; height: auto; aspect-ratio: 44 / 42; }
.activity-option input:checked + .activity-circle { background: var(--coral); }
.activity-option input:focus-visible + .activity-circle { outline: 3px solid var(--coral); outline-offset: 5px; }
.email-screen { min-height: max(100svh, 860px); padding-bottom: 400px; }
.email-screen .input-box { margin-top: 34px; }
.consent-option { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; max-width: 440px; font-size: 14px; line-height: 1.25; }
.consent-option input { appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin: 0; border: 2px solid white; border-radius: 2px; cursor: pointer; }
.consent-option input:checked { background: var(--coral); box-shadow: inset 0 0 0 3px var(--ink); }
.legal-link { display: inline; padding: 0; border: 0; background: none; color: var(--coral); font: inherit; text-decoration: underline; text-align: left; }
.email-prizes { position: absolute; left: 50.69%; right: 6.4%; bottom: 45px; height: 310px; pointer-events: none; }
.email-prizes img { position: absolute; right: 0; top: 0; width: 173px; height: 310px; object-fit: cover; }
.email-prizes p { position: absolute; right: 130px; left: 0; bottom: 17px; border-radius: 100px; background: #b8b8b8; padding: 18px 60px 18px 25px; color: #000; font-size: 12px; line-height: 1.3; letter-spacing: -.02em; }
.email-prizes p > span { color: var(--coral); text-transform: uppercase; }
.result-screen { overflow: clip; min-height: max(100svh, 784px); background: var(--ink); padding: 250px 30px 60px; }
.swimmer-background { position: absolute; inset: 0; overflow: hidden; opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
.swimmer-background img { position: absolute; left: -4.58vw; top: -20.35vw; width: 104.58vw; height: 130.69vw; object-fit: cover; transform: scaleX(-1); mask-image: url('./assets/ready-swimmer-mask.svg'); mask-size: 100.14vw 56.46vw; mask-position: 4.58vw 20.35vw; mask-repeat: no-repeat; }
.result-story { position: relative; z-index: 1; max-width: 38%; }
.result-story h1 { font-size: 60px; line-height: .9; font-weight: 500; letter-spacing: -.04em; }
.result-story h1 > span { display: block; }
#result-name { color: var(--coral); font-size: clamp(48px, 6.94vw, 112px); margin-bottom: 14px; overflow-wrap: anywhere; }
.result-story h1 em { display: block; }
.experience-details { display: grid; grid-template-columns: minmax(0, 110fr) minmax(0, 150fr) minmax(0, 140fr); width: 440px; max-width: calc(100% - 8px); gap: 20px; margin: 60px 0 0 8px; }
.experience-details > div { min-width: 0; }
.experience-details .activity-circle { width: 100%; max-width: 100px; height: auto; aspect-ratio: 1; }
.experience-details .activity-icon { width: 44%; height: auto; aspect-ratio: 44 / 42; }
.experience-details dt { font-size: 12px; color: #7a7a7a; margin: 0 0 24px 15px; }
.experience-details dd { margin: 0; }
#result-address { font-size: 26px; line-height: 1.06; text-transform: uppercase; overflow-wrap: anywhere; }
.experience-duration { font-size: 70px; font-weight: 500; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.result-preview { position: absolute; top: 33.67%; left: 39.03%; width: 56.18%; aspect-ratio: 809 / 452; border-radius: 20px; overflow: hidden; }
.result-preview > img { width: 100%; height: 100%; object-fit: cover; }
.result-preview .pill { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 190px; }
.prepare-copy { position: absolute; left: 44.3%; top: 44.1%; max-width: 306px; font-size: 25px; line-height: 1.08; letter-spacing: -.03em; }
.prepare-progress { position: absolute; bottom: 0; left: 0; width: 70%; height: 7px; accent-color: var(--coral); }
body[data-screen="preparing"] .result-preview, body[data-screen="preparing"] .result-actions { display: none; }
body[data-screen="preparing"] .animation-status { color: var(--coral); }
.animation-status { position: absolute; left: 30px; bottom: 70px; color: #ffb6bc; max-width: 37%; font-size: 13px; line-height: 1.4; }
.result-actions { position: absolute; bottom: 25px; left: 30px; display: flex; gap: 25px; }
.journey-screen, .journey-stage, .journey-view, .journey-video { width: 100%; height: 100svh; }
.journey-screen { position: relative; background: #000; overflow: hidden; }
.journey-view > * { display: block; width: 100%; height: 100%; }
.journey-video { position: absolute; inset: 0; object-fit: contain; background: #000; }
.journey-caption { position: absolute; z-index: 3; top: 90px; left: 30px; max-width: 470px; padding: 16px 20px; background: #191919bf; border-radius: 12px; pointer-events: none; }
.journey-caption h1 { font-size: 23px; letter-spacing: -.03em; font-weight: 400; }
.journey-caption p { font-size: 12px; margin-top: 7px; }
.journey-close { position: absolute; top: 25px; right: 30px; z-index: 4; background: #191919bf; border-radius: 25px; padding: 12px 18px; }
body[data-screen='journey'] .site-header { display: none; }
.journey-fade { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.5s ease; }
.journey-fade.is-black { opacity: 1; }
.completion-card { width: min(480px, calc(100% - 36px)); max-height: calc(100svh - 40px); overflow-y: auto; border: 1px solid #ffffff38; border-radius: 20px; padding: 35px; color: white; background: #191919; }
.completion-card::backdrop { background: #0009; backdrop-filter: blur(10px); }
.completion-card h2 { font-size: clamp(28px, 7vw, 48px); line-height: 1; font-weight: 400; letter-spacing: -.05em; margin: 30px 0 24px; overflow-wrap: anywhere; }
.completion-card p { font-size: 15px; line-height: 1.5; }
.completion-actions { display: grid; gap: 13px; margin-top: 28px; }
.completion-card .pill { font-size: 17px; min-height: 56px; }
#legal-close { margin-top: 25px; width: 100%; }
.fatal-error { position: fixed; inset: 0; z-index: 100; background: white; color: #191919; display: grid; place-items: center; padding: 30px; }
.fatal-error > div { max-width: 480px; }
.fatal-error h1 { font-size: 36px; letter-spacing: -.04em; font-weight: 400; margin-bottom: 25px; }
.fatal-error p { margin-bottom: 25px; line-height: 1.6; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 761px) and (max-width: 1250px) {
  .activity-options { gap: 6px; }
  .activity-option { max-width: 78px; }
  .distance-badge { top: 200px; }
  .distance-badge > p { font-size: 16px; }
  .map-name { font-size: 30px; }
  .map-sport { font-size: 16px; }
  .travel-times { gap: 10px; }
  .travel-times dt { font-size: 10px; }
  .travel-times dd { font-size: 13px; }
  .email-prizes { right: 3%; }
  .email-prizes p { white-space: normal; }
  .result-story h1 { font-size: 48px; }
  .experience-details { width: 345px; grid-template-columns: minmax(0, 90fr) minmax(0, 125fr) minmax(0, 110fr); gap: 10px; }
  .experience-details .activity-circle { max-width: 80px; font-size: 9px; }
  #result-address { font-size: 21px; }
  .experience-duration { font-size: clamp(36px, 4.4vw, 55px); }
}
@media (max-width: 760px) {
  .site-header { top: 24px; left: 22px; right: 22px; }
  .brand { gap: 25px; }
  .brand span { font-size: 10px; }
  .prehome-screen { display: flex; flex-direction: column; padding: 110px 22px 30px; gap: 35px; }
  .prehome-story { padding: 0; }
  .prehome-story h1 { font-size: clamp(35px, 7.8vw, 59px); letter-spacing: -.04em; }
  .prehome-copy { margin: 28px 0; font-size: 16px; line-height: 1.35; }
  .desktop-break { display: none; }
  .pill { min-height: 58px; font-size: 20px; }
  .prehome-story .pill { width: 100%; }
  .prehome-gallery { width: 100%; height: auto; min-height: 0; grid-template-rows: auto auto; gap: 12px; }
  .prehome-lido { aspect-ratio: 592 / 331; }
  .prehome-shirt, .prehome-passes { aspect-ratio: 221 / 396; }
  .prehome-passes { aspect-ratio: 353 / 396; }
  .landing-screen { min-height: 100svh; padding: 120px 22px 40px; }
  .landing-screen h1 { font-size: clamp(43px, 9vw, 65px); white-space: normal; }
  .landing-screen h1 em { display: block; }
  .landing-story { width: 52%; margin-top: 30px; }
  .intro-copy { font-size: 17px; line-height: 1.3; }
  .prize-numbers { flex-direction: column; gap: 22px; margin-top: 30px; }
  .prize-numbers strong { font-size: 64px; }
  .prize-numbers div > span { font-size: 9px; margin-top: 8px; }
  .prize-numbers b { font-size: 18px; }
  .prize-ampersand { display: none; }
  .landing-kit { top: 285px; left: 54%; width: 42%; }
  .landing-outline { display: none; }
  .landing-action { position: relative; left: auto; top: auto; margin-top: 50px; width: 100%; }
  .landing-action > p { font-size: 18px; margin-bottom: 18px; }
  .input-box { width: 100%; }
  .input-box input { font-size: 18px; padding-left: 22px; }
  .address-suggestions { width: 100%; }
  .map-heading { top: 105px; left: 22px; }
  .map-heading img { width: 240px; }
  .distance-badge { top: 175px; left: 22px; max-width: none; width: calc(100% - 44px); }
  .distance-badge > strong { font-size: 30px; }
  .distance-badge > p { font-size: 15px; }
  .travel-times { gap: 12px; margin-top: 8px; padding-top: 12px; }
  .travel-times dt { font-size: 10px; }
  .travel-times dd { font-size: 13px; }
  .map-shade { background: linear-gradient(rgb(0 0 0 / .7), rgb(0 0 0 / .5)); }
  .map-label { width: 90px; font-size: 10px; padding-right: 12px; }
  .panel-screen { padding: 510px 22px 40px; }
  .form-panel { max-width: none; }
  .form-panel h1 { font-size: 25px; }
  .activity-fieldset { margin: 28px 0 24px; }
  .activity-options { gap: 10px; }
  .activity-option { max-width: 76px; }
  .email-screen { min-height: 100svh; padding: 657px 30px 40px; }
  .email-screen .form-panel h1 { font-size: 24px; line-height: 1.09; }
  body[data-screen='email-screen'] .map-heading { top: 77px; left: 26px; }
  body[data-screen='email-screen'] .map-heading img { width: min(378px, calc(100vw - 52px)); }
  body[data-screen='email-screen'] .distance-badge { top: 143px; left: 30px; width: calc(100% - 60px); max-width: none; }
  body[data-screen='email-screen'] .distance-badge > p { font-size: 16px; line-height: 1.5; }
  body[data-screen='email-screen'] .travel-times { width: 100%; margin-top: 0; padding-top: 8px; }
  body[data-screen='email-screen'] .travel-times dt { font-size: 12px; }
  body[data-screen='email-screen'] .travel-times dd { font-size: 16px; }
  .map-personalization { width: 100%; padding-bottom: 5px; margin-bottom: 8px; }
  .map-personalization > div:first-child { max-width: none; }
  .map-name { font-size: 30px; }
  .map-sport { font-size: 16px; }
  .summary-activity-icon { display: none; }
  .email-screen .input-box { margin-top: 25px; }
  .email-prizes { position: relative; left: auto; right: auto; bottom: auto; height: 310px; margin-top: 35px; width: 100%; }
  .email-prizes p { right: 140px; line-height: 1.4; padding: 17px; }
  .email-prizes img { width: 156px; height: 280px; }
  .result-screen { padding: 210px 22px 30px; min-height: 100svh; }
  .result-heading { top: 110px; left: 22px; }
  .result-heading img { width: 240px; }
  .result-story { max-width: none; }
  .result-story h1 { font-size: 44px; }
  #result-name { font-size: 64px; }
  .experience-details { width: 100%; max-width: none; grid-template-columns: 86px minmax(0, 1fr) 92px; gap: 12px; margin: 35px 0 0; }
  .experience-details dt { margin: 0 0 18px; font-size: 10px; }
  .experience-details .activity-circle { max-width: 80px; font-size: 9px; }
  #result-address { font-size: 19px; }
  .experience-duration { font-size: 44px; }
  .result-preview { position: relative; top: auto; left: auto; width: 100%; margin-top: 30px; }
  .result-preview .pill { width: 160px; }
  .animation-status { position: relative; left: auto; bottom: auto; max-width: none; margin-top: 20px; }
  .result-actions { position: relative; bottom: auto; left: auto; margin-top: 20px; }
  .prepare-copy { position: relative; top: auto; left: auto; margin-top: 30px; font-size: 20px; }
  .swimmer-background img { width: 160%; height: 150%; left: -45%; top: -15%; }
  .journey-caption { top: 75px; left: 15px; right: 15px; padding: 12px 15px; }
  .journey-caption h1 { font-size: 19px; }
  .journey-close { top: 15px; right: 15px; font-size: 12px; }
}
@media (max-width: 360px) {
  .activity-options { gap: 5px; }
  .activity-option { max-width: 64px; }
  .travel-times { gap: 8px; }
  .travel-times dt { font-size: 9px; }
  .travel-times dd { font-size: 12px; }
  .experience-details { grid-template-columns: 70px minmax(0, 1fr) 80px; gap: 10px; }
  .experience-duration { font-size: 38px; }
  #result-name { font-size: 52px; }
  #result-address { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }