/* herdfs additions, loaded after the compiled layout stylesheet. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* The original's ink and white, as site.css now writes them. */
  --ink: oklch(16.84% 0 none);
  --surface: oklch(100% 0 none);
  --header-glass: color-mix(in oklch, var(--surface) 72%, transparent);
  --header-glass-opaque: color-mix(in oklch, var(--surface) 96%, transparent);
  --header-rule: color-mix(in oklch, var(--ink) 6%, transparent);
  /* The original's standard curve, for transitions that extend its own lists. */
  --site-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  /* Space the fixed header takes over the page once scrolled: its frosted bar, plus a gap before content.
     Pinned sections start below it (CSS here, StickyHorizontalListFx in script). */
  --header-bar: 8.7rem;
  --header-gap: 2rem;
  --header-clearance: calc(var(--header-bar) + var(--header-gap));
}

@media screen and (min-width: 769px) {
  :root {
    --header-bar: 9.6rem;
  }
}

/* Registered so getComputedStyle returns pixels for the script. */
@property --header-gap {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --header-clearance {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

/* ---------- Logo and hero title ---------- */
.Header-logo[data-v-d5c9479a] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: auto;
  aspect-ratio: auto;
}

.Header-logoIcon[data-v-d5c9479a] {
  width: 2.9rem;
  flex: none;
}

.Header-wordmark[data-v-d5c9479a] {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}

.Footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}

.Footer-brand svg {
  width: 1.8rem;
  height: 1.8rem;
}

.HomeHero-titleMainInner[data-v-cca44647] {
  gap: 0;
}

.HomeHero-titleMainItem[data-v-cca44647]:first-child {
  margin-inline-end: 0;
  padding-inline-end: 0;
}

@media screen and (max-width: 768px) {
  .HomeHero-titleMain .AppTitle-1 {
    font-size: 4.6rem;
    line-height: 4.6rem;
  }
}

@media screen and (min-width: 769px) {
  .SliceTitleListGrid-list[data-v-de6b7178] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 769px) {
  .Header-logoIcon[data-v-d5c9479a] {
    width: 4.4rem;
  }

  .Header-wordmark[data-v-d5c9479a] {
    font-size: 3.4rem;
  }
}

/* ---------- Frosted header bar ----------
   Fades in once content scrolls under the fixed header (HeaderFx adds .--is-scrolled), so the hero is unchanged. */
.Header[data-v-d5c9479a]::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  /* The header box only spans its top padding; the logo and buttons are centred below it, overflowing.
     Mobile content sits at 2.1rem–6.6rem, so 8.7rem leaves an equal gap above and below. */
  block-size: var(--header-bar);
  background: var(--header-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-block-end: 1px solid var(--header-rule);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}

.Header.--is-scrolled[data-v-d5c9479a]::before {
  opacity: 1;
}

/* The open mobile menu brings its own panel; the bar would only peek out around its corners. */
.Header.--is-nav-open[data-v-d5c9479a]::before {
  opacity: 0;
}

/* Desktop: content is 6rem tall, centred on the padding line (6.8rem by default). Scrolled, the line moves
   up to 4.8rem, so the content spans 1.8rem–7.8rem and a 9.6rem bar keeps 1.8rem above and below. */
@media screen and (min-width: 769px) {
  .Header.--is-scrolled[data-v-d5c9479a] {
    padding-block-start: 4.8rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .Header[data-v-d5c9479a] {
    transition: padding-block-start 300ms var(--ease-out);
  }
}

/* Without backdrop-filter, translucent white alone would let text show through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .Header[data-v-d5c9479a]::before {
    background: var(--header-glass-opaque);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .Header[data-v-d5c9479a]::before {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Stacking ----------
   The original lifts these above the fixed header (900): the search field (999) so its results cover the
   chain wheel, whose items reach z-index 14, and the footer language switcher (9999). 100 is enough for both. */
.SliceBlockchainsSearch-inputWrap[data-v-051a504d],
.LangSwitcher[data-v-99bb7c1b] {
  z-index: 100;
}

/* ---------- Pinned sections clear the header ----------
   Both pinned sections were laid out for the full screen and slid under the fixed header on phones. */

/* App screens, phones: the original fills exactly 100svh: 2rem padding, a mockup of 75svh - 2rem, a 2rem gap,
   then the title card (25svh - 2rem). On iOS Safari svh is the height with the toolbar expanded, so with the
   compact floating toolbar the block ended well above the bottom (624px used of 798px seen). The pinned area
   now takes the height halfway between the expanded and collapsed toolbar (svh and lvh), which stays fixed
   while the toolbar animates and on iOS 26 ends at the floating buttons. The mockup takes the extra room so
   the gaps stay equal. Where svh equals lvh, every value below is the original's. */
@media screen and (max-width: 768px) {
  .SliceScrollableAppScreens-sticky[data-v-c86fbc86] {
    --pin-h: calc(50svh + 50lvh);
    --pin-bottom: min(var(--header-gap), calc(50lvh - 50svh));
    --app-h: calc(var(--pin-h) - 25svh - var(--header-clearance) - var(--pin-bottom));
    height: var(--pin-h);
    padding-block: var(--header-clearance) var(--pin-bottom);
  }

  /* Width follows height at the shape the original has on a 664px-tall phone (476 x 347). */
  .SliceScrollableAppScreens-app[data-v-c86fbc86] {
    height: var(--app-h);
    width: min(100%, calc(var(--app-h) / 1.37));
    margin-inline: auto;
  }
}

/* App screens, desktop: the mockup (47rem wide, 1.5217 tall per wide) is centred in the full screen, which on
   short laptop windows puts it against the header. The top padding is zero until centring would cross the
   header's clearance, then just enough to sit the mockup below it. On windows too short to fit it at all,
   the mockup scales down. Where it already fit, both work out to the original values. */
@media screen and (min-width: 769px) {
  .SliceScrollableAppScreens-sticky[data-v-c86fbc86] {
    --app-w: min(47rem, calc((100svh - var(--header-clearance) - var(--header-gap)) / 1.5217));
    padding-block-start: max(0px, calc(2 * var(--header-clearance) + var(--app-w) * 1.5217 - 100svh));
  }

  .SliceScrollableAppScreens-app[data-v-c86fbc86] {
    width: var(--app-w);
  }
}

/* Horizontal cards: StickyHorizontalListFx sets --shl-zoom below 1 only when a card is taller than the space
   under the header. Zoom scales text and video together, so nothing inside a card moves relative to the rest. */
.SliceTitleListHorizontal-listItem[data-v-80f8c832] {
  zoom: var(--shl-zoom, 1);
}

/* ---------- Focus ----------
   One ring for keyboard focus. Text fields keep their own focus styles: :focus-visible also matches them on a
   mouse click, and the original shows them without a ring. */
:focus-visible:not(input, textarea, select) {
  outline: max(2px, 0.08em) solid currentColor;
  outline-offset: 0.25em;
}

/* Filled dark button: its text is white, so the ring takes the fill colour instead. */
.AppButton.--theme-dark[data-v-a045cdd8]:focus-visible {
  outline-color: var(--ink);
}

/* ---------- Press feedback ----------
   The original removes the tap highlight (html * { -webkit-tap-highlight-color: transparent }), so presses
   need their own state. Buttons scale; text links and list options dim. */
.AppButton[data-v-a045cdd8]:active,
.DownloadButton-button[data-v-cfeff700]:active,
.Header-burger[data-v-d5c9479a]:active,
.Header-logo[data-v-d5c9479a]:active,
.Header-navListItemLink[data-v-d5c9479a]:active,
.LangSwitcher-button[data-v-99bb7c1b]:active,
.Footer-socialsItem[data-v-b3bc0079]:active {
  scale: 0.97;
}

/* Full-width FAQ rows: a smaller step reads the same on a wide target. */
.SliceFAQ-listItemHead[data-v-5ccfc627]:active {
  scale: 0.98;
}

/* GSAP positions this pill with an inline transform and writes `scale: none` inline beside it. */
.PageDownloadButton-button[data-v-1d492dfd]:active {
  scale: 0.97 !important;
}

.--rich a:active,
.Footer-linksListItem[data-v-b3bc0079]:active,
.Footer-secondLinksItem[data-v-b3bc0079]:active,
.LangSwitcher-item[data-v-99bb7c1b]:active,
.autocomplete-result:active {
  opacity: 0.6;
}

/* Each list repeats the element's own transitions from site.css, which a new declaration would replace. */
@media (prefers-reduced-motion: no-preference) {
  .AppButton[data-v-a045cdd8] {
    transition: border-color 0.5s var(--site-ease), scale 160ms var(--ease-out);
  }

  .Header-navListItemLink[data-v-d5c9479a],
  .LangSwitcher-button[data-v-99bb7c1b] {
    transition: color 0.5s var(--site-ease), scale 160ms var(--ease-out);
  }

  .Footer-socialsItem[data-v-b3bc0079] {
    transition: transform 0.5s var(--site-ease), scale 160ms var(--ease-out);
  }

  .DownloadButton-button[data-v-cfeff700],
  .PageDownloadButton-button[data-v-1d492dfd],
  .Header-burger[data-v-d5c9479a],
  .Header-logo[data-v-d5c9479a],
  .SliceFAQ-listItemHead[data-v-5ccfc627] {
    transition: scale 160ms var(--ease-out);
  }
}

/* ---------- Overscroll ----------
   The original sets overscroll-behavior: none on both axes of html and body. The x axis also turns off
   swipe to go back, and phones lose their native bounce; keep only the desktop vertical stop. */
html,
body {
  overscroll-behavior: auto;
}

html {
  overscroll-behavior-y: none;
}

@media (any-pointer: coarse) {
  html {
    overscroll-behavior-y: auto;
  }
}

/* ---------- Reset ----------
   good-css "The reset", added one rule at a time and kept only where the layout fingerprint and the screenshot
   comparison showed no change. site.css already has box-sizing, the tap highlight, font smoothing and
   text-size-adjust. Left out because they change how the page renders: min-width: 0, text-wrap: pretty,
   overflow-wrap: break-word, text-wrap: balance on headings, and the img/svg/video display: block rule. */
:root {
  interpolate-size: allow-keywords;
  scrollbar-gutter: stable;
  font-synthesis: none;
}

body {
  margin: 0;
  min-height: 100svh;
}

input,
textarea,
select {
  font-size: max(16px, 1rem);
}

button,
a,
[role='button'] {
  touch-action: manipulation;
}

button,
[role='button'] {
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Secondary landing pages ---------- */
.LandingProse {
  min-height: 100vh;
  padding-block: 18rem 10rem;
  background: var(--c-white, #fff);
}

.LandingProse-hero {
  padding-block-end: 10rem;
}

.LandingProse-kicker {
  margin: 0 0 2rem;
  color: #727472;
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
}

.LandingProse h1 {
  max-width: 105rem;
  margin: 0;
  font-size: clamp(5.2rem, 8vw, 12rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.LandingProse-hero > p:last-child {
  max-width: 72rem;
  margin: 5rem 0 0 auto;
  color: #5a585a;
  font-size: 2.4rem;
  line-height: 1.4;
}

.LandingProse a {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.LandingProse-sections {
  display: grid;
  gap: 2rem;
}

.LandingProse-section,
.LandingProse-principles,
.LandingProse-cta {
  padding: 5rem;
  border-radius: 2rem;
  background: #f0f1f0;
}

.LandingProse-section > span {
  color: #727472;
  font-size: 1.4rem;
}

.LandingProse h2 {
  margin: 2rem 0 0;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.LandingProse-section p,
.LandingProse-cta p {
  max-width: 72rem;
  margin: 3rem 0 0 auto;
  color: #5a585a;
  font-size: 2rem;
  line-height: 1.5;
}

.LandingProse-principles {
  margin-block-start: 6rem;
  background: #e2f2e5;
}

.LandingProse-principles ul {
  display: flex;
  margin: 4rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
}

.LandingProse-principles li {
  padding: 1.5rem 2.2rem;
  border: 0.2rem solid #0f0f0f;
  border-radius: 10rem;
  background: #fff;
  font-size: 1.8rem;
}

.LandingProse-cta {
  margin-block-start: 2rem;
  background: #ffcadc;
}

.LandingProse-cta > a {
  display: inline-flex;
  margin-block-start: 4rem;
  padding: 1.6rem 2.6rem;
  border-radius: 10rem;
  background: #0f0f0f;
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .LandingProse {
    padding-block-start: 12rem;
  }

  .LandingProse-hero {
    padding-block-end: 6rem;
  }

  .LandingProse-hero > p:last-child {
    margin-block-start: 3rem;
    font-size: 1.8rem;
  }

  .LandingProse-section,
  .LandingProse-principles,
  .LandingProse-cta {
    padding: 3rem 2.5rem;
  }

  .LandingProse h2 {
    font-size: 3.2rem;
  }

  .LandingProse-section p,
  .LandingProse-cta p {
    font-size: 1.7rem;
  }
}