/* ==========================================================================
   40 Acres: post-export fixes
   --------------------------------------------------------------------------
   Hand-maintained. Kept OUT of the Webflow-generated stylesheet so a future
   re-export cannot clobber it. Loaded after the generated CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Semantic heading promotion
   Page titles were divs or h2s, leaving 24 of 28 pages with no h1. They are
   now h1. The generated CSS types h1 at line-height 100px and h2 at 64px,
   and base .heading-style-h2 sets no line-height, so a bare swap would
   stretch these headings. Restore the h2 metric, desktop only: the
   responsive .heading-style-h2 rules already carry their own line-height and
   must keep winning below 992px.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  h1.heading-style-h2 { line-height: 64px; }
}

/* --------------------------------------------------------------------------
   2. iOS Safari viewport height
   The generated CSS uses 100vh, which on iOS includes the address bar and so
   clips full-height sections. dvh tracks the visible viewport. Declared as a
   progressive enhancement: browsers without dvh keep the 100vh value.
   -------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  .section.home-hero,
  .section.hero,
  .bg-video,
  .w-background-video { min-height: 100dvh; }
}

/* --------------------------------------------------------------------------
   3. Touch target sizing
   WCAG 2.5.8 asks for 24x24 minimum; 44x44 is the iOS guideline. The consent
   checkbox and radio inputs shipped at 13x13. Grow the hit area without
   changing the painted control, so the visual design is untouched.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .w-checkbox-input,
  .w-radio-input,
  input[type="checkbox"],
  input[type="radio"] {
    position: relative;
  }
  .w-checkbox-input::after,
  .w-radio-input::after,
  input[type="checkbox"]::after,
  input[type="radio"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .submit-button,
  .w-button,
  .secondary-button { min-height: 44px; }
}

/* Visible keyboard focus. The export relies on the browser default, which the
   dark surfaces make hard to see. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #b728ff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Netlify Forms honeypot
   A decoy field. Real people never see it, so anything that fills it is a bot
   and Netlify drops the submission. It must stay in the DOM to be submitted,
   so hide it rather than removing it.
   -------------------------------------------------------------------------- */
.nf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   5. Rich-text links and body copy
   Links inside .w-richtext had no styling at all, so they fell back to the
   browser default #0000ee. Against the #201c32 surface that measures 1.75:1,
   well under the WCAG AA minimum of 4.5:1. This affected the privacy policy
   and terms pages before these fixes existed, not just the new pages.
   White on #201c32 measures about 16.5:1 and matches the existing .text-link
   convention, with the underline carrying the affordance rather than colour.
   -------------------------------------------------------------------------- */
.w-richtext a {
  color: var(--white, #ffffff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.w-richtext a:hover { color: #b728ff; }

/* Long-form legal copy shipped at 14px. 16px is the accepted floor for body
   text on mobile and reads better at any width. */
.w-richtext p,
.w-richtext li { font-size: 16px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   6. Consent banner
   Palette taken from the design system: --dv-100 surface, violet primary,
   4px button radius. Sits above content, does not trap scroll, and is
   dismissed from the DOM entirely once a choice is made.
   -------------------------------------------------------------------------- */
.consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: #201c32;
  color: #ffffff;
  font-family: Degular, sans-serif;
  /* The bar sits on #201c32 and the dominant page surface is also #201c32, so
     with no border there is nothing separating them. Two layers do the work: a
     tight one that reads as a defined edge, and a broad one that lifts the bar
     off the page. Both are black rather than a brand tint. */
  box-shadow:
    0 -2px 6px rgba(0, 0, 0, .5),
    0 -14px 36px rgba(0, 0, 0, .45);
}
.consent-text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 15px;
  line-height: 1.5;
}
.consent-link { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.consent-link:hover { color: #b728ff; }
.consent-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.consent-btn {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.consent-accept { background: #6c2db8; color: #ffffff; }
.consent-accept:hover { background: #9548f3; }
.consent-decline { background: transparent; color: #ffffff; border-color: rgba(255,255,255,.4); }
.consent-decline:hover { background: rgba(255,255,255,.1); }

@media screen and (max-width: 479px) {
  .consent-banner { padding: 16px; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   7. Footer and nav link target size
   Stacked footer links shipped at 20px tall. WCAG 2.5.8 (AA) asks for 24x24;
   the 44x44 figure is 2.5.5 (AAA) and is applied above only to the form
   controls, where it does not disturb the layout. Forcing 44px on a column of
   footer links would open large gaps in the design, so these are taken to the
   AA threshold instead.
   -------------------------------------------------------------------------- */
.section.is-footer a {
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
}

/* --------------------------------------------------------------------------
   8. Legal page rich text
   The legal pages are the longest reading on the site and shipped with almost
   no typographic structure: 161 characters per line, no space between list
   items, a flat 10px paragraph margin, 40px list indents, and default markers.
   Everything below is presentation only. No legal wording is touched.
   -------------------------------------------------------------------------- */

/* Measure. 161 characters per line is roughly double what is comfortable.
   Left-aligned rather than centred, because `.t-c` sets align-items: flex-start
   so the h1 above is left-aligned too. */
/* Measure is set in px, not ch, on purpose. terms-and-conditions wraps its
   content in .text-size-normal.line-h-24, two classes, which out-specifies
   .w-richtext and holds the wrapper at 18px. A ch-based width therefore resolved
   differently there, 91 characters against 71 elsewhere. 540px is about 71
   characters at the 16px body size these pages actually render at. */
.w-richtext { max-width: 720px; }

/* Paragraph rhythm. 10px between paragraphs of 25.6px line-height read as one
   undifferentiated block; a little over one line of space separates them. */
.w-richtext p { margin: 0 0 1.1em; }
.w-richtext > :first-child { margin-top: 0; }
.w-richtext > :last-child { margin-bottom: 0; }

/* Headings. Only the Spanish terms page uses them today (h3 to h5), and they
   had no site rule at all, so they fell back to browser defaults where h5 is
   smaller than body text. Generous space above, tight below, so a heading binds
   to the text it introduces. */
.w-richtext h2,
.w-richtext h3,
.w-richtext h4,
.w-richtext h5,
.w-richtext h6 {
  margin: 2em 0 .55em;
  color: var(--white, #ffffff);
  font-weight: 700;
  line-height: 1.3;
}
.w-richtext h2 { font-size: 28px; }
.w-richtext h3 { font-size: 24px; }
.w-richtext h4 { font-size: 20px; }
.w-richtext h5 { font-size: 18px; }
.w-richtext h6 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Lists. 40px of padding is a deep indent at any width and pushed content off
   the measure on mobile. Items had no separation at all. */
.w-richtext ul,
.w-richtext ol {
  margin: 0 0 .6em;
  padding-left: 1.7em;
}
.w-richtext li { margin-bottom: .6em; }
.w-richtext li:last-child { margin-bottom: 0; }

/* Webflow fragments long numbered lists into many single-item <ol>s, each
   carrying start="N" so the numbers stay correct. Matching the list margin to
   the item margin is what makes those fragments read as one continuous list
   instead of a stack of separate blocks. Do not raise it without checking a
   fragmented list, terms-of-service has a run of 13. */
.w-richtext ul + p,
.w-richtext ol + p,
.w-richtext ul + h2, .w-richtext ol + h2,
.w-richtext ul + h3, .w-richtext ol + h3,
.w-richtext ul + h4, .w-richtext ol + h4,
.w-richtext ul + h5, .w-richtext ol + h5 { margin-top: .65em; }

/* Marker types change with depth, so nesting is legible without counting
   indents. Max depth in these documents is 2, the third level is future-proofing. */
.w-richtext ol { list-style-type: decimal; }
.w-richtext ol ol { list-style-type: lower-alpha; }
.w-richtext ol ol ol { list-style-type: lower-roman; }
.w-richtext ul { list-style-type: disc; }
.w-richtext ul ul { list-style-type: circle; }
.w-richtext ul ul ul { list-style-type: square; }
.w-richtext li > ul,
.w-richtext li > ol { margin: .6em 0 0; }

/* Emphasis. Bold is the only weight change; the colour stays white so a long
   run of bolded defined terms does not turn into a colour field. */
.w-richtext strong,
.w-richtext b { font-weight: 700; }
.w-richtext em,
.w-richtext i { font-style: italic; }

.w-richtext blockquote {
  margin: 1.4em 0;
  padding: .1em 0 .1em 1.2em;
  border-left: 3px solid #6c2db8;
  font-size: 16px;
  line-height: 1.6;
}

.w-richtext table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 15px;
}
.w-richtext th,
.w-richtext td {
  padding: .6em .8em;
  border: 1px solid rgba(255, 255, 255, .18);
  text-align: left;
  vertical-align: top;
}
.w-richtext th { font-weight: 700; background: rgba(255, 255, 255, .05); }

@media screen and (max-width: 767px) {
  .w-richtext ul,
  .w-richtext ol { padding-left: 1.3em; }
  .w-richtext h2 { font-size: 24px; }
  .w-richtext h3 { font-size: 21px; }
  .w-richtext h4 { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   9. Legal page layout and table of contents
   There is no grid in the original markup, despite the class name: `.grid.t-c`
   computes to display: flex with flex-flow: column and align-items: flex-start,
   so a constrained column pinned to the left of a 1224px container and left the
   right side empty. js/legal-toc.js restructures the container into two real
   columns, a sticky contents list and the document body, which gives the space
   a job instead of centring around it.

   The whole assembly is centred rather than stretched, so the reading measure
   stays at 720px whatever the viewport does.
   -------------------------------------------------------------------------- */
/* Pages in this section without a contents list, 404, thank-you and gracias,
   have no .legal-layout to place them, so they would fall back to the original
   left-pinned column. Centre them instead. The grid opts out, since it centres
   itself with justify-content. */
.section.terms-conditions .container > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section.terms-conditions .container > .legal-layout { max-width: none; }

.legal-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 720px);
  column-gap: 56px;
  align-items: start;
  justify-content: center;
}

/* position: sticky needs a scrollable ancestor chain. `.main-wrapper` carries
   overflow: hidden, which exists to contain the blurred, absolutely positioned
   .img-absolute layers, and which also makes it the sticky element's scroll
   container, so the contents list scrolled away with the page.

   overflow-x: clip still clips, but unlike hidden it does NOT create a scroll
   container, so sticky works. Scoped with :has() to the pages that carry this
   section, leaving every other page's overflow behaviour untouched. Browsers
   without :has() or clip simply get a non-sticky list, which still works. */
.main-wrapper:has(.section.terms-conditions) {
  overflow-x: clip;
  overflow-y: visible;
}

.legal-toc {
  position: sticky;
  /* clears the fixed navigation, which is 117px desktop and 88px mobile */
  top: calc(var(--nav-h, 117px) + 32px);
  max-height: calc(100vh - var(--nav-h, 117px) - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  font-size: 14px;
}
.legal-toc-summary {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.legal-toc-summary::-webkit-details-marker { display: none; }
.legal-toc-summary::marker { content: ""; }

.legal-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.legal-toc-list li { margin: 0; }
.legal-toc-link {
  display: block;
  padding: 7px 0 7px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: rgba(255, 255, 255, .62);
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.legal-toc-link:hover { color: #ffffff; }
/* current section: the violet marker convention used for list markers */
.legal-toc-link.is-current {
  border-left-color: #9548f3;
  color: #ffffff;
  font-weight: 600;
}

/* deep-linked headings must clear the fixed navigation, not just the viewport
   top, or the heading you jumped to sits behind the bar */
.legal-anchor { scroll-margin-top: calc(var(--nav-h, 117px) + 24px); }

@media screen and (max-width: 991px) {
  /* single column, contents collapsed above the document */
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
  .legal-toc {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 8px;
    padding: 0;
  }
  .legal-toc-summary {
    display: inline-block;
    min-height: 44px;
    padding: 12px 0;
    margin-bottom: 0;
    font-size: 12px;
  }
  .legal-toc[open] .legal-toc-summary { margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   10. Sticky navigation
   Fixed rather than sticky: the bar is the first child of the first section,
   so a sticky bar's containing block would be that section and it would
   unstick once the hero scrolled past. `.main-wrapper`'s overflow: hidden
   would break sticky anyway. js/sticky-nav.js inserts .navbar-spacer to hold
   the space the bar gave up by leaving the flow.

   Readability is the point of the two background states. The bar carries white
   text and sits over whatever the hero happens to be, which on the homepage is
   a pale sky. Transparent white-on-light is not readable, so there is always a
   painted layer behind it: a scrim at the top of the page, solid once scrolled.

   The layer is a ::before rather than a background on .navbar itself, because
   Webflow's interactions write background-color straight onto the element as an
   inline style. A pseudo-element cannot be overridden that way.
   -------------------------------------------------------------------------- */
/* The bar travels with the first section until that section has scrolled past,
   then it fixes to the top. Absolute rather than static so it keeps overlaying
   the hero media exactly as before; .navbar-spacer holds its place in flow.
   js/sticky-nav.js marks the parent, whose class differs per page: hero, about,
   contact, faqs-page-copy, enterprise-node, terms-conditions. */
.has-fixed-nav { position: relative; }

.navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* above page content, below the consent bar at 9999 */
  z-index: 1000;
}

/* Past the first screenful: pinned, solid, and dropped in rather than snapped,
   since it reappears after having scrolled away. */
.navbar.is-stuck {
  position: fixed;
  animation: nav-drop .28s ease-out;
}
@keyframes nav-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .navbar.is-stuck { animation: none; }
}

.navbar::before {
  content: "";
  /* display: block is required, not cosmetic. Webflow ships a clearfix,
     .w-nav:before { display: table }, on this same pseudo-element. A table box
     shrinks to fit and ignores opposing insets, so the layer computed to 0x0
     and painted nothing. */
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Transparent over the hero, by request. There was a dark scrim here to keep
     the wordmark and links legible against a light hero; it was removed
     deliberately. The bar is unpainted until it pins, so on a pale hero the
     white nav text sits directly on the image. */
  background: transparent;
}

/* Scrolled: a flat surface, so the bar is readable over any section beneath it.
   No shadow, by request. The solid fill is what carries legibility here, not
   any separation from the content underneath. */
.navbar.is-stuck::before {
  background: #201c32;
}

.navbar-spacer { flex: none; }

/* Mobile menu open. The panel is absolutely positioned inside the bar and runs
   735px tall, which already overflowed an 812px viewport before the bar was
   fixed. Fixed makes that unreachable, so the bar scrolls internally instead.
   It is also forced solid, since a scrim behind a full menu is not enough. */
/* The panel, not the bar, is what needs to scroll. Two wrong turns are worth
   recording: capping the bar with max-height and overflow: auto clipped the
   735px panel to the bar's own 88px, because the panel is absolutely positioned
   and adds no height; and giving the bar a full-viewport height moved the panel
   to 812px, because it is anchored at top: 100% of the bar. Leaving the bar
   alone and bounding the panel keeps that anchor correct. */
.navbar.nav-open .nav-menu {
  max-height: calc(100vh - var(--nav-h, 88px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
@supports (height: 100dvh) {
  .navbar.nav-open .nav-menu { max-height: calc(100dvh - var(--nav-h, 88px)); }
}
.navbar.nav-open::before {
  background: #201c32;
}

/* The desktop "Bitcoin" mega-panel is a direct sibling of the navbar, not a
   child of it, and it was absolutely positioned inside the first section. Once
   the bar became fixed the panel stayed anchored to that section, so opening it
   after scrolling dropped it off-screen. Pinning it to the viewport directly
   under the bar keeps the two together at any scroll position. Verified as a
   direct sibling on all 29 pages that have a navbar. Uses the general sibling
   combinator, not adjacent: sticky-nav.js inserts .navbar-spacer between the
   two, which breaks `+`. */
.navbar ~ .dropdown-flex._100 {
  position: absolute;
  top: var(--nav-h, 117px);
  left: 0;
  right: 0;
}
/* once the bar is pinned, the panel has to be too, or it stays behind with the
   first section and opens off-screen */
.navbar.is-stuck ~ .dropdown-flex._100 { position: fixed; }

/* --------------------------------------------------------------------------
   11. Dropdown chevron direction
   The Bitcoin toggle shipped with two chevron images: a down one, and a second
   marked `.lang-arrow.hide` that the Webflow interaction swaps in when the menu
   opens. That second image pointed at images/chevron-down-1_1chevron-down-1.png,
   which was never in the export and always 404'd, so the open state has had no
   chevron since day one. It was removed as one of the two dead references.

   Rather than restore a broken asset and rely on the interaction to reveal it,
   the one real chevron is rotated. The interaction sets display: none inline on
   it when the menu opens, which is what the !important overrides.

   `.lang-arrow-copy` exists once per page, on this toggle only, so the override
   cannot leak elsewhere.
   -------------------------------------------------------------------------- */
.dropdown-toggle-2-copy .lang-arrow-copy,
.dropdown-toggle-2 .lang-arrow {
  transition: transform .2s ease;
}
.dropdown-toggle-2-copy.w--open .lang-arrow-copy {
  display: block !important;
  transform: rotate(180deg);
}
/* same affordance on the language toggle, which has no interaction attached and
   so needs no override */
.dropdown-toggle-2.w--open .lang-arrow {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-toggle-2-copy .lang-arrow-copy,
  .dropdown-toggle-2 .lang-arrow { transition: none; }
}
