.mapboxgl-ctrl-logo{display:none!important}

/* Box dark theme for the landing page and the waitlist page (which links the same stylesheets).
   Ground #0c0e0d (a step under Box ink #101312), text #f1f2ef, accent Box blue #2648ef, type Suisse Intl.
   The compiled stylesheets hard-code a cream light theme, so each colour utility they use is remapped here. */
:root,:host{--color-cloud:#0c0e0d;--box-blue:#2648ef;--box-blue-soft:#7c93ff;color-scheme:dark}
html,body{background-color:#0c0e0d;color:#f1f2ef;font-synthesis:none}
::selection{background:#2648ef;color:#fff}

/* type: Suisse Intl is the Box face; headings run tight, as they do on the Box site */
h1,h2,h3{letter-spacing:-.03em}
.font-obviously-black{letter-spacing:-.045em;text-transform:none}

/* ground and text */
.bg-cloud{background-color:#0c0e0d}
.text-surface{color:#f1f2ef}
.text-surface-80{color:#cdd0cb}
.text-surface-70{color:#9a9e99}
.text-black,.hover\:text-black:hover,.focus-visible\:text-black:focus-visible{color:#fff}
.hover\:decoration-black:hover,.focus-visible\:decoration-black:focus-visible{text-decoration-color:#fff}
.decoration-black\/35{text-decoration-color:rgba(255,255,255,.35)}
.text-\[\#6E6E72\]{color:#a9ada8}

/* surfaces: the frosted light cards become frosted dark ones */
.bg-white{background-color:#151917}
.bg-white\/5{background-color:rgba(255,255,255,.04)}
.bg-white\/10{background-color:rgba(255,255,255,.06)}
.bg-white\/25{background-color:rgba(255,255,255,.07)}
.bg-white\/35{background-color:rgba(255,255,255,.08)}
.bg-white\/45{background-color:rgba(255,255,255,.09)}
.bg-white\/50{background-color:rgba(255,255,255,.10)}
.bg-white\/55{background-color:rgba(255,255,255,.11)}
.bg-white\/60,.hover\:bg-white\/60:hover{background-color:rgba(255,255,255,.14)}
.bg-white\/70{background-color:rgba(255,255,255,.13)}
.border-white{border-color:rgba(255,255,255,.22)}
.border-white\/10{border-color:rgba(255,255,255,.08)}
.border-white\/45{border-color:rgba(255,255,255,.12)}
.border-white\/60{border-color:rgba(255,255,255,.16)}
.border-white\/90{border-color:rgba(255,255,255,.20)}
.border-black\/10{border-color:rgba(255,255,255,.10)}
.bg-\[\#E4E0DF\]{background-color:#1b201d}
.bg-\[\#030303\]\/25,.bg-\[rgba\(3\,3\,3\,0\.25\)\]{background-color:rgba(255,255,255,.10)}
.bg-\[rgba\(130\,130\,130\,0\.65\)\]{background-color:rgba(38,44,41,.85)}
.bg-\[\#04FF00\]{background-color:#2648ef}
.bg-\[\#3A78B3\]\/90{background-color:rgba(38,72,239,.9)}
.grain:before{opacity:calc(var(--grain-opacity)*.6)}

/* fades that used to melt into cream now melt into the dark ground */
.to-cloud,.to-\[\#F7F3F0\]{--tw-gradient-to:#0c0e0d}
.from-\[rgba\(247\,243\,240\,0\)\]{--tw-gradient-from:rgba(12,14,13,0)}
.via-\[rgba\(247\,243\,240\,0\.62\)\]{--tw-gradient-via:rgba(12,14,13,.62)}
.to-\[rgba\(247\,243\,240\,0\.98\)\]{--tw-gradient-to:rgba(12,14,13,.98)}
.from-\[rgba\(255\,255\,255\,0\.42\)\]{--tw-gradient-from:rgba(12,14,13,.5)}
.from-\[rgba\(255\,255\,255\,0\.48\)\]{--tw-gradient-from:rgba(12,14,13,.5)}
.from-\[rgba\(255\,255\,255\,0\.62\)\]{--tw-gradient-from:rgba(12,14,13,.6)}
.via-\[rgba\(255\,255\,255\,0\.34\)\]{--tw-gradient-via:rgba(12,14,13,.34)}
.via-\[rgba\(255\,255\,255\,0\.22\)\]{--tw-gradient-via:rgba(12,14,13,.22)}
.via-\[rgba\(255\,255\,255\,0\.1\)\]{--tw-gradient-via:rgba(12,14,13,.1)}
.to-\[rgba\(255\,255\,255\,0\.02\)\]{--tw-gradient-to:rgba(12,14,13,.02)}
/* the sky-blue panels become Box blue */
.from-\[\#57AEEF\]{--tw-gradient-from:#2648ef}
.via-\[\#8FC6F0\]{--tw-gradient-via:#16267f}
.bg-\[radial-gradient\(ellipse_at_top_left\,rgba\(255\,255\,255\,0\.7\)_0\%\,transparent_55\%\)\]{background-image:radial-gradient(ellipse at top left,rgba(124,147,255,.22) 0%,transparent 55%)}


/* map controls and chips */
.mapboxgl-ctrl-group{background:#151917}
.mapboxgl-popup-content{background:#151917;color:#f1f2ef}

/* hero headline is 94px, so its two-line block is 188px tall (the donor 14rem fit 112px) */
/* the line under it is 30px (was 32px) */
h1.font-obviously-black + div p{font-size:min(30px,6.6vw)!important;text-align:center}

/* buttons and inputs share the header badge's 16px corner radius */
a[href="/waitlist/"].rounded-full{border-radius:16px}
a[href="/waitlist/"] .rounded-full{border-radius:10px;background-color:#fff;transition:background-color .2s ease}
a[href="/waitlist/"] .rounded-full img{filter:brightness(0);transition:filter .2s ease}
a[href="/waitlist/"]:hover .rounded-full,a[href="/waitlist/"]:focus-visible .rounded-full{background-color:#2648ef}
a[href="/waitlist/"]:hover .rounded-full img,a[href="/waitlist/"]:focus-visible .rounded-full img{filter:brightness(0) invert(1)}

/* waitlist buttons on the landing page use the same glass as the time badge and the FAQ button */
a[href="/waitlist/"].rounded-full{background-color:rgba(82,82,82,.4)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .2s ease}
a[href="/waitlist/"].rounded-full:hover{background-color:rgba(82,82,82,.6)!important}
a[href="/waitlist/"].rounded-full>span:first-child{color:#fff}

/* business tiles: the photo softens on hover so the cutout that rises stands out */
div.grain-30 img.object-cover{transition:filter .28s ease,transform .28s ease}
div.grain-30:hover img.object-cover{filter:blur(6px);transform:scale(1.2)}

/* tile labels stay on one line ("Food and drink" used to wrap into three) */
div.grain-30 > span.absolute{width:auto!important;height:auto!important;white-space:nowrap}

/* hero headline: Suisse Semibold instead of Bold, and even 20px steps between headline, line and button */
@font-face{font-family:BoxSemibold;src:url(/fonts/SuisseIntl-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}
h1.font-obviously-black{font-family:BoxSemibold,"Suisse Intl",sans-serif!important;font-weight:600!important;height:auto!important}
h1.font-obviously-black + div{margin-top:20px!important}
h1.font-obviously-black + div + div{margin-top:20px!important}

/* ---- phones ----------------------------------------------------------------------------------------------------- */
.box-scroll-cue{position:fixed;z-index:80;left:50%;bottom:1.5rem;display:inline-flex;align-items:center;gap:.75rem;padding:.5rem .5rem .5rem 1rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(21,25,23,.72);box-shadow:0 8px 24px rgba(0,0,0,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f1f2ef;font:500 .75rem/1 var(--font-aeonik-fono),ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transform:translateX(-50%);transition:background-color .2s ease,transform .2s ease}
.box-scroll-cue.is-hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(.5rem)}
.box-scroll-cue:hover{background:rgba(38,72,239,.9);transform:translateX(-50%) translateY(-2px)}
.box-scroll-cue:focus-visible{outline:2px solid #7c93ff;outline-offset:4px}
.box-scroll-cue-arrow{display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:#f1f2ef;color:#151917;font:600 1.1rem/1 var(--font-aeonik),ui-sans-serif,sans-serif;transition:transform .2s ease}
.box-scroll-cue:hover .box-scroll-cue-arrow{transform:translateY(2px)}
@media (max-width:640px){.box-scroll-cue{bottom:1rem;padding-left:.875rem}.box-scroll-cue span:first-child{font-size:.6875rem}}
@media (prefers-reduced-motion:reduce){.box-scroll-cue,.box-scroll-cue-arrow{transition:none}.box-scroll-cue:hover{transform:translateX(-50%)}.box-scroll-cue:hover .box-scroll-cue-arrow{transform:none}}
@media (max-width:1023px){
  /* the header carries the time badge and the FAQ button, on clear glass like the desktop header */
  header.fixed{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask:none!important;mask:none!important}
  /* business tiles swipe like a carousel; labels stay on one line */
  .box-tiles{overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .box-tiles::-webkit-scrollbar{display:none}
  .box-tiles-row{padding-right:8px;width:max-content}
  .box-tiles-row > div{scroll-snap-align:start;width:calc((100vw - 40px)*.415)!important;min-width:calc((100vw - 40px)*.415)}

  div.grain-50::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 42%)}
  div.grain-50 > span.absolute{width:auto!important;height:auto!important;white-space:nowrap;top:16px!important;left:16px!important;font-size:16px!important}
}
@media (max-width:767px){
  /* hero headline: balanced lines that stay inside the frame, and a sub line in proportion */
  h1.font-obviously-black{font-size:8.2vw!important;line-height:1.06!important;letter-spacing:-.03em!important;padding-inline:8px}
  h1.font-obviously-black span.inline-block{text-wrap:balance}
  h1.font-obviously-black + div p{font-size:max(16px,4.9vw)!important;line-height:1.32!important;text-wrap:balance}
}
@media (max-width:767px){
  /* the intro sentence: 28px on a phone (the donor's 16px looked lost beside the 62px box), lines close to the box */
  div.leading-15{font-size:28px;line-height:40px}
  /* the top line centres on the box, so its left edge sits with the line below it */
  div.leading-15 div[class*="-translate-x-1/2"][class*="whitespace-nowrap"]{left:50%!important}
}