/* Modicum Explorer — destination screen (approved reference, 10 Nov 2026).
   One component shared by Golden Gate Bridge, Coit Tower and Napa Valley. Measurements are taken from the
   reference phone screens (390 × 844 pt) and scale with the screen width. */
:root{--sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Size unit: the reference screen is 390 × 844. When the browser's bars make the visible area shorter, everything scales down so the whole layout still fits. */
  --u:min(calc(min(100vw,480px) / 390),calc(100svh / 800))}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#000;color:#fff;font-family:var(--sf);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.mx{position:relative;width:min(100vw,480px);height:100svh;height:100dvh;min-height:520px;margin:0 auto;overflow:hidden;background:#15161a}
/* Photograph: full bleed. The file is supplied by the owner; until then the slot says so (no stand-in image). */
.mx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mx-photo.missing{display:none}
/* Logo rule: the logo only ever sits on clear sky. When an object in the photo (tower, bridge) would reach the
   logo area, the photo moves down and the gap above is filled with that photo's own sky colours. */
.mx-sky{position:absolute;left:0;right:0;top:0;height:calc(var(--drop,0px) + 60px)}
.mx-photo{top:var(--drop,0px);height:calc(100% - var(--drop,0px));-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,var(--fade0,1)) 0,#000 56px);mask-image:linear-gradient(180deg,rgba(0,0,0,var(--fade0,1)) 0,#000 56px)}
.mx-slot{position:absolute;inset:0;display:none;align-items:flex-start;justify-content:center;padding-top:calc(260 * var(--u));background:linear-gradient(180deg,#3d4a63 0%,#2a2f3b 55%,#16171b 100%);color:rgba(255,255,255,.55);font-size:calc(13 * var(--u));letter-spacing:.04em;text-align:center}
.mx-photo.missing + .mx-slot{display:flex}
.mx-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 44%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.66) 78%,rgba(0,0,0,.78) 100%)}
/* Brand */
.mx-brand{position:absolute;left:0;right:0;top:calc(68 * var(--u) + env(safe-area-inset-top) * .3);display:flex;flex-direction:column;align-items:center;gap:calc(13 * var(--u))}
.mx-mark{width:calc(59 * var(--u));aspect-ratio:795/345;background:#fff;-webkit-mask:url(/brand/mx-mark.svg) center/contain no-repeat;mask:url(/brand/mx-mark.svg) center/contain no-repeat}
.mx-word{width:calc(198 * var(--u));aspect-ratio:3395/214;background:#fff;-webkit-mask:url(/brand/mx-wordline.svg) center/contain no-repeat;mask:url(/brand/mx-wordline.svg) center/contain no-repeat}
/* Copy */
.mx-copy{position:absolute;left:calc(24 * var(--u));right:calc(24 * var(--u));bottom:calc(246 * var(--u));text-align:center}
.mx-copy h1{font-size:calc(35 * var(--u));line-height:calc(43 * var(--u));font-weight:400;letter-spacing:-.01em}
.mx-copy p{margin-top:calc(14 * var(--u));font-size:calc(16.5 * var(--u));line-height:calc(24 * var(--u));font-weight:400;color:rgba(255,255,255,.96)}
/* Price pill */
.mx-buy{position:absolute;left:calc(62 * var(--u));right:calc(62 * var(--u));bottom:calc(169 * var(--u));height:calc(51 * var(--u));display:flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(243,239,234,.95);color:#1c1c1e;font:inherit;font-size:calc(18 * var(--u));font-weight:500;letter-spacing:-.005em;text-decoration:none;cursor:pointer;box-shadow:0 8px 24px -14px rgba(0,0,0,.6)}
.mx-buy svg{position:absolute;right:calc(20 * var(--u));width:calc(9 * var(--u));height:auto}
/* Free Preview */
.mx-prev{position:absolute;left:0;right:0;bottom:calc(120 * var(--u));margin:0 auto;width:max-content;display:flex;align-items:center;gap:calc(12 * var(--u));background:none;border:0;color:#fff;font:inherit;font-size:calc(17 * var(--u));font-weight:500;cursor:pointer;padding:calc(4 * var(--u)) calc(6 * var(--u))}
.mx-prev .ic{width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;background:#fff;display:grid;place-items:center}
.mx-prev .ic svg{width:calc(11 * var(--u));height:auto;margin-left:calc(2 * var(--u))}
.mx-prev[aria-pressed="true"] .ic svg{margin-left:0}
.mx-prev .bar{position:absolute;left:0;right:0;bottom:calc(-6 * var(--u));height:2px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .2s}
.mx-prev .bar i{display:block;height:100%;width:0;background:#fff}
.mx-prev[aria-pressed="true"] .bar{opacity:1}
/* Bottom navigation: dark translucent */
.mx-nav{position:absolute;left:0;right:0;bottom:0;height:calc(91 * var(--u) + env(safe-area-inset-bottom) * .5);border-radius:calc(26 * var(--u)) calc(26 * var(--u)) 0 0;background:none;display:flex;justify-content:center;padding-top:calc(12 * var(--u))}
.mx-nav a{filter:drop-shadow(0 1px 6px rgba(0,0,0,.6));display:flex;flex-direction:column;align-items:center;gap:calc(5 * var(--u));color:#fff;text-decoration:none;font-size:calc(13 * var(--u))}
.mx-nav svg{height:calc(30 * var(--u));width:auto}
.mx-buy:focus-visible,.mx-prev:focus-visible,.mx-nav a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mx-toast{position:absolute;left:50%;bottom:calc(232 * var(--u));transform:translateX(-50%);background:rgba(20,20,22,.82);color:#fff;font-size:calc(14 * var(--u));padding:calc(8 * var(--u)) calc(14 * var(--u));border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.mx-toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.mx-toast,.mx-prev .bar{transition:none}}