/* Belavo landing — Figma 1417:677 ("MacBook Pro 16" - 1", 1728 × 2209).
   Desktop: every element sits at Figma's coordinates, in units of --u (one Figma pixel, scaled to the viewport).
   Below 900 px the same elements reflow into one column. */

@font-face { font-family: "Outside Field"; src: url("/assets/fonts/OutsideField-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outside Field"; src: url("/assets/fonts/OutsideField-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Outside Field Serif"; src: url("/assets/fonts/OutsideFieldSerif-VF.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #030A0E;
  --display: "Outside Field", "Outside Field Serif", "Iowan Old Style", Georgia, serif;
  --note-serif: "Outside Field Serif", Georgia, serif;
  --sign: "Noticia Text", Georgia, serif;
  --pearl: radial-gradient(50% 50% at 50% 50%, rgba(255,248,242,.9), rgba(255,248,242,0)),
           radial-gradient(50% 50% at 35% 35%, rgba(234,247,255,.8), rgba(234,247,255,0)),
           radial-gradient(50% 50% at 65% 65%, rgba(255,243,232,.85), rgba(255,243,232,0)),
           radial-gradient(50% 50% at 20% 20%, rgba(252,231,243,.75), rgba(252,231,243,0)),
           radial-gradient(50% 50% at 80% 20%, rgba(224,242,254,.7), rgba(224,242,254,0)),
           radial-gradient(50% 50% at 50% 80%, rgba(243,232,255,.65), rgba(243,232,255,0)),
           radial-gradient(50% 50% at 20% 80%, rgba(216,243,255,.55), rgba(216,243,255,0)),
           radial-gradient(50% 50% at 80% 80%, rgba(255,231,217,.5), rgba(255,231,217,0)), linear-gradient(#fff, #fff);
  --spring: cubic-bezier(.34, 1.4, .64, 1);          /* replaced by a true damped spring (linear()) from JS */
  --spring-soft: cubic-bezier(.3, 1.2, .5, 1);
  --intro-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --u: calc(min(100vw, 1728px) / 1728);
}

/* Cross-page transitions: the header stays put, the page underneath cross-fades (Chrome 126+, Safari 18.2+). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vtIn .42s cubic-bezier(.33,1,.68,1) both; }
@keyframes vtOut { to { opacity: 0; filter: blur(6px); transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; filter: blur(6px); transform: translateY(10px); } }
@keyframes glyph { from { opacity: 0; filter: blur(10px); } 99% { filter: blur(0); } to { opacity: 1; filter: none; } }

/* ---------- Header ---------- */
.lp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; view-transition-name: site-header;
  transition: transform .5s var(--ease-out-cubic), background-color .4s, backdrop-filter .4s, box-shadow .4s;
}
.lp-header .in { max-width: calc(1728 * var(--u)); margin: 0 auto; height: max(calc(150 * var(--u)), 76px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 max(calc(27 * var(--u)), 16px); }
.lp-header.scrolled { background: rgba(4,9,11,.62); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.lp-header.scrolled .in { height: 72px; transition: height .4s var(--ease-out-cubic); }
.lp-header.hide { transform: translateY(calc(-100% - 60px)); }
.lp-logo { font-family: var(--display); font-size: max(calc(36 * var(--u)), 26px); color: #fff; line-height: 1; justify-self: start; text-decoration: none !important; }
.lp-nav { display: flex; gap: max(calc(40 * var(--u)), 22px); }
.lp-nav a { position: relative; color: rgba(255,255,255,.86); font-size: 16px; font-weight: 400; padding: 8px 0; text-decoration: none !important; transition: color .2s; }
.lp-nav a[aria-current="page"] { color: #fff; font-weight: 700; }
.lp-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 1.5px; border-radius: 2px; background: var(--teal); transition: left .35s var(--ease-out-cubic), right .35s var(--ease-out-cubic); }
.lp-nav a:hover { color: #fff; }
.lp-nav a:hover::after, .lp-nav a[aria-current="page"]::after { left: 0; right: 0; }
.lp-header .store { justify-self: end; }
.menu-btn { display: none; }

/* ---------- App Store button (Figma "Group 1": 205 × 67, radius 17, pearl) ---------- */
.store {
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: 67px; width: 205px; padding: 0 18px 0 13px;
  border-radius: 17px; color: var(--ink); text-decoration: none !important; isolation: isolate;
  /* The glow follows the smoothed shape (a box-shadow would follow the plain rounded box). */
  filter: drop-shadow(0 10px 14px rgba(255,255,255,.12)) drop-shadow(0 2px 3px rgba(0,0,0,.35));
  transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(var(--ms, 1));
  transition: transform .45s var(--spring-soft), filter .35s;
  will-change: transform;
}
/* Figma's corner smoothing: the pearl fill is clipped to a smoothed (squircle) outline generated in site.js;
   border-radius stays as the fallback until it's applied. */
.store .sq { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pearl); overflow: hidden; }
.store .sq::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; mix-blend-mode: soft-light; }
.store.sheen .sq::after { animation: storeSheen 1.4s var(--ease-out-cubic); }
@keyframes storeSheen { from { background-position: 150% 0 } to { background-position: -60% 0 } }
.store svg { width: 42px; height: 42px; flex: none; transform-origin: 50% 80%; }
.store:hover svg { animation: appleHop .7s var(--spring); }
@keyframes appleHop { 0% { transform: none } 35% { transform: translateY(-4px) rotate(-6deg) } 100% { transform: none } }
.store .t { display: grid; justify-items: center; flex: 1; line-height: 1.15; white-space: nowrap; }
.store .t small { font-size: 20px; font-weight: 400; }
.store .t b { font-size: 20px; font-weight: 700; }
.store:hover { filter: drop-shadow(0 16px 26px rgba(255,255,255,.24)) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.store:active { --ms: .96; transition-duration: .12s; }
.lp-header .store { height: max(calc(67 * var(--u)), 46px); width: max(calc(205 * var(--u)), 150px); border-radius: max(calc(17 * var(--u)), 13px); gap: 8px; padding: 0 12px 0 10px; }
.lp-header .store svg { width: max(calc(42 * var(--u)), 28px); height: max(calc(42 * var(--u)), 28px); }
.lp-header .store .t small, .lp-header .store .t b { font-size: max(calc(20 * var(--u)), 14px); }

/* Pointer light: a faint teal pool that follows the cursor behind the content */
.spot { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(26,213,213,.07), rgba(26,213,213,0)); transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0); }
@media (hover: none) { .spot { display: none; } }


/* Inner pages: a compact header and room for it */
/* Every page has the home page's header, so moving between pages never jumps. */
html { scrollbar-gutter: stable; }
body:not(.landing) main { padding-top: calc(max(calc(150 * var(--u)), 76px) + 24px); }

@media (max-width: 899px) {
  :root { --u: calc(100vw / 430); }
  .lp-header .in { grid-template-columns: auto 1fr auto; height: 64px; gap: 12px; }
  .lp-header.scrolled .in { height: 60px; }
  .lp-nav { display: none; }
  .lp-header .store { display: none; }
  .menu-btn { display: grid; place-items: center; justify-self: end; grid-column: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
    background: rgba(27,31,34,.6); color: #fff; backdrop-filter: blur(12px); cursor: pointer; }
  .menu-btn i, .menu-btn i::before, .menu-btn i::after { display: block; width: 16px; height: 1.5px; background: #fff; border-radius: 2px; position: relative; transition: transform .35s var(--spring-soft), background .2s; }
  .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; }
  .menu-btn i::before { top: -5px; } .menu-btn i::after { top: 5px; }
  .menu-open .menu-btn i { background: transparent; }
  .menu-open .menu-btn i::before { transform: translateY(5px) rotate(45deg); }
  .menu-open .menu-btn i::after { transform: translateY(-5px) rotate(-45deg); }
  .lp-nav.sheet { display: flex; position: fixed; inset: 64px 12px auto; flex-direction: column; gap: 0; padding: 10px; border-radius: 22px;
    background: rgba(12,18,20,.92); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(20px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
    opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity .3s var(--ease-out-cubic), transform .4s var(--spring-soft); }
  .menu-open .lp-nav.sheet { opacity: 1; transform: none; pointer-events: auto; }
  .lp-nav.sheet a { padding: 14px 14px; font-size: 18px; border-radius: 14px; }
  .lp-nav.sheet a::after { display: none; }
  .lp-nav.sheet a[aria-current="page"] { background: rgba(255,255,255,.06); }

  body:not(.landing) main { padding-top: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .spot { display: none; }
  .lp-header, .store { transition: none; }
  .store:hover svg { animation: none; }
}

/* Info tiles that aren't links don't pretend to be */
div.tile:hover { transform: none; box-shadow: none; border-color: var(--line); }
div.tile::after { content: none; }

.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .grid.two { grid-template-columns: 1fr; } }

/* ---------- No-reload navigation (router.js) ---------- */
/* Screen readers hear the new page's name. */
.sr-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Only when a page takes longer than 120 ms: a thin bar that never reaches the end on its own. */
html::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; transform-origin: left;
  background: linear-gradient(90deg, var(--teal, #1AD5D5), #fff); transform: scaleX(0); opacity: 0; }
html.nav-busy::after { opacity: 1; transform: scaleX(.85); transition: transform 2.4s cubic-bezier(.08,.82,.17,1), opacity .2s; }
main h1:focus { outline: none; }
main h1:focus-visible { outline: 2px solid var(--teal, #1AD5D5); outline-offset: 6px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html.nav-busy::after { transition: none; } }