/* Datasphere — hand-written overrides on top of the built _astro stylesheet.
   Kept out of _astro/index.DX7saar6.css so a re-mirror of the site cannot
   silently drop them. Loaded by index.html, privacy/ and terms/. */

/* Desktop nav: logo left, links optically centred in the bar, CTA right.
   Absolute centring rather than a 3-column grid so the links sit on the true
   centre of the pill regardless of how wide the logo or the button get. */
.d-nav { position: relative; }

.d-nav__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------------------
   Mobile pass (<= 768px)
   --------------------------------------------------------------------------- */

/* The floating glyphs around the hero and the footer CTA. They collide with
   the headline and the CTA copy at phone widths, so they are desktop-only.
   Delete this block to bring them back everywhere. */
@media (max-width: 768px) {
  .c-hero__scene,
  .c-footer__scene { display: none; }
}

/* "We chase a curiosity…" — the scroll-scrubbed reveal used to be gated at
   769px and phones got a static block of text that ran off both edges.
   These rules give the mobile title the same treatment the desktop one gets:
   the icon cluster sits in the middle (invisible, measurable) so the FLIP
   maths can fly each glyph out to its word. Paired with the six-line mobile
   title in index.html and the breakpoint gate in the _astro bundle. */
@media (max-width: 768px) {
  .c-how__icons,
  .c-how__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .c-how__icons {
    pointer-events: none;
    opacity: 0;
  }

  /* match the inline glyph size so the fly-out starts from the right spot */
  .c-how__icons .c-how__icon {
    width: 40px;
    height: 40px;
  }

  .c-how__title .line span { opacity: 0; }

  /* the closing morph hands off to the desktop-only mockup section */
  .c-how__mockup { display: none; }
}

/* Gallery tiles are sized in rem, and rem is 0.694vw — on a 390px phone that
   made 16rem ≈ 43px. Pin them to px instead. 76px keeps them clear of each
   other: 24 cards on a radius of 0.7 × viewport gives ~71px of arc apiece. */
@media (max-width: 768px) {
  .c-styles__gallery .c-gallery__image {
    width: 76px;
    height: 66px;
  }

  .c-styles__gallery .c-gallery__image img { border-radius: 10px; }
}

/* Footer: 600px of empty gradient under the CTA, then another 104px before
   the credits. Tightened, more so now the floating glyphs are gone. */
@media (max-width: 768px) {
  .c-footer__top {
    min-height: 420px;
    padding-top: 56px;
    margin-bottom: 0;
  }

  .c-footer__bottom {
    padding-top: 48px;
    padding-bottom: 40px;
  }

  .c-footer__bottom__top { margin-bottom: 32px; }
}