/* 90-pages — sub-pages (markets / reserves / docs / 404 = Quest "404" layout, disclosures = Quest "Privacy policy" layout).
   Measured on quest-template.framer.ai/404 and /privacy-policy at 1440 / 1000 / 390 (template/probes/pages/).
   404 "Main":   100vh tall, max 920 wide, padding 48/0 (≥1200) · 48/24 (810–1199) · 48/16 (<810), content centred.
                 Container max 800, gap 40 · Text gap 20 · title 52 (38 phone) · description Inter 16/140 % · "Secondary" button.
   Privacy "Main": max 560 wide, padding 172/0/48 (≥810) · 132/16/48 (<810), gap 64 · head gap 16 · sections gap 32 · section gap 16.
   Motion (Element.animate interception on the template), all on load and all CSS so they run on the nav's clock:
     title        one span per word,      delay t0 + 0.1 s × (i + 1),     0.8 s, cubic-bezier(.12,.23,.5,1)
     description  one span per character, delay t0 + 0.2 s + 0.05 s/line, 0.7 s, cubic-bezier(.12,.23,.17,.98)
     both         opacity .001 → 1, blur(10px) → 0, translateY(32px) → none;  t0 = Framer hydration lag after the nav (94–145 ms measured)
     404 button   rises 32px over 1.4 s after 0.4 s (cubic-bezier(.12,.23,.5,1))
     sections     rise 32px over 0.8 s after 0.4 s (cubic-bezier(.44,0,.56,1)), every section at once
   The split into spans is done by the inline script at the end of each page section (synchronous, before first paint);
   js/sections/90-pages.js only sets the per-line delay (--ln) and the runtime brand in <title>. */

/* ------------------------------------------------------------ shared */
.pg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.pg__title,
.pg__sub,
.pg__kicker {
  width: 100%;
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Framer rich text: pre-wrap once split (keeps the exact inter-word spaces of the template) */
.pg__title.is-split,
.pg__sub.is-split,
.pg__kicker.is-split { white-space: pre-wrap; }
.pg__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}
.pg__sub {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;          /* 22.4 px, % like Framer so line boxes round the same way */
  letter-spacing: -0.02em;
  color: var(--t-80);
}
/* kicker above the title: the template's kicker preset (Inter 14/150 %, uppercase, 60 % white) */
.pg__kicker { margin-bottom: -4px; }   /* 16 px to the title inside the 20 px text stack */

/* split pieces: same final state Framer leaves on its spans (blur(0px) + will-change: transform) */
.pg { --pg-t0: 120ms; }
.pg__w,
.pg__c { display: inline-block; filter: blur(0px); will-change: transform; }
.pg__wn { white-space: nowrap; }
.pg__w { animation: pg-text 0.8s cubic-bezier(0.12, 0.23, 0.5, 1) calc(var(--pg-t0) + 100ms + var(--i, 0) * 100ms) both; }
.pg__c { animation: pg-text 0.7s cubic-bezier(0.12, 0.23, 0.17, 0.98) calc(var(--pg-t0) + var(--pg-c0, 200ms) + var(--ln, 0) * 50ms) both; }
.pg__kicker { --pg-c0: 100ms; }   /* ours: the kicker goes one step before the description */

/* ----------------------------------------------------- 404 layout */
.pg--center {
  justify-content: center;
  gap: 32px;
  max-width: 920px;
  height: 100vh;
  min-height: max-content;
  padding: 48px 0;
}
.pg__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 800px;
}
.pg__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.pg__cta {
  flex: none;
  position: relative;
  will-change: transform;
  animation: pg-rise-32 1.4s cubic-bezier(0.12, 0.23, 0.5, 1) 0.4s both;
}

/* Quest "Secondary" button: 10 % white fill, radius 12, 14/16 padding, Google Sans 16/500; label 80 % → 100 % white on hover (0.2 s) */
.pg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: var(--r-12);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--t-80);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-hover);
}
.pg-btn:hover { color: #fff; }

/* ------------------------------------------------ privacy layout */
.pg--doc {
  gap: 64px;
  max-width: 560px;
  padding: 172px 0 48px;
}
.pg__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.pg__sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.pg__sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  will-change: transform;
  animation: pg-rise-32 0.8s cubic-bezier(0.44, 0, 0.56, 1) 0.4s both;
}
/* h5 preset: Google Sans 18/120 % 500, white */
.pg__h {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
/* paragraph preset: Inter 14/150 %, 80 % white */
.pg__p {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--t-80);
}
/* inline contract: styled like the template's inline link (underlined, same colour, no hover change); click / Enter copies.
   Truly inline so a long address wraps with the sentence on narrow phones; the "Copied" feedback is a small chip above it
   (core.js writes "Copied" into [data-copy-label] for 1.4 s), so the paragraph never reflows. */
.pg__ca {
  position: relative;
  color: inherit;
  text-decoration: underline;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.pg__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  padding: 5px 8px;
  border-radius: var(--r-4);
  background-color: #222529;                 /* 10 % white over the page background, opaque so the line under it stays hidden */
  box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.35);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover);
}
.pg__tip:empty { visibility: hidden; transition: none; }
.pg__ca.is-copied .pg__tip:not(:empty) { opacity: 1; transform: none; }

/* ------------------------------------------------------ keyframes */
@keyframes pg-rise-32 {
  from { opacity: 0.001; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes pg-text {
  from { opacity: 0.001; filter: blur(10px); transform: translateY(32px); }
  to { opacity: 1; filter: blur(0px); transform: none; }
}

/* ---------------------------------------------------- breakpoints */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .pg--center { padding: 48px 24px; }
}
@media (max-width: 809.98px) {
  .pg--center { padding: 48px 16px; }
  .pg--doc { max-width: none; padding: 132px 16px 48px; }
  .pg__title { font-size: 38px; }
}

/* ------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pg__cta,
  .pg__sec,
  .pg__w,
  .pg__c { animation: none; will-change: auto; }
}

/* ------------------------------------------- markets / docs / reserves content */
.pg--head-only { padding-bottom: 8px; }
.mk { padding-top: 24px; }
.mk .mk__card { justify-content: space-between; }
.mk .mk__top { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.mk .mk__val { margin: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: var(--bw) solid var(--w-05); width: 100%; }
.mk .mk__val dt { font-family: var(--f-body); font-size: 12px; line-height: 1.4; letter-spacing: -0.01em; color: var(--t-60); }
.mk .mk__val dd { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mk .mk__num { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.mk .mk__basis { font-family: var(--f-body); font-size: 13px; line-height: 1.45; letter-spacing: -0.02em; color: var(--t-60); }
.mk .mk__basis a, .mk__note a, .pg__a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-hover) var(--ease-hover); }
.mk .mk__basis a:hover, .mk__note a:hover, .pg__a:hover { color: #fff; }
.mk .co__user { width: 100%; align-items: center; }
.mk .mk__valhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mk .mk__status { flex: none; font-family: var(--f-display); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: -0.01em; color: var(--t-80); padding: 7px 10px; border-radius: var(--r-4); background-color: var(--w-05); white-space: nowrap; }
.mk .mk__note { font-family: var(--f-body); font-size: 13px; line-height: 1.5; letter-spacing: -0.02em; color: var(--t-60); max-width: 640px; }
.pg__ol { margin: 0; padding-left: 20px; list-style: decimal; display: flex; flex-direction: column; gap: 8px; font-family: var(--f-body); font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; color: var(--t-80); }
.pg__ol li::marker { color: var(--t-60); }
.pg__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #fff; overflow-wrap: anywhere; }
.pg__links { display: flex; flex-wrap: wrap; gap: 20px; }
.rsv__grid { margin: 0; display: grid; gap: 1px; border-radius: var(--r-12); overflow: hidden; background: var(--w-05); }
.rsv__grid > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--surface); }
.rsv__grid dt { font-family: var(--f-body); font-size: 14px; color: var(--t-60); }
.rsv__grid dd { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 15px; color: #fff; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 809.98px) { .mk .co__user { flex-wrap: wrap; } }
.pg__ca.is-pending { text-decoration: none; cursor: default; }
.pg__ca.is-pending .pg__tip { display: none; }
.pg__links:not(:has(a:not([hidden]))) { display: none; }
.mk .mk__live { margin: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr) minmax(0, 1fr); gap: 12px; width: 100%; padding-top: 16px; border-top: var(--bw) solid var(--w-05); }
.mk .mk__live div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk .mk__live dt { font-family: var(--f-body); font-size: 12px; line-height: 1.4; color: var(--t-60); }
.mk .mk__live dd { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk .mk__buy { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: var(--r-12); background-color: #fff; color: #0a0d11; font-family: var(--f-display); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: -0.02em; text-decoration: none; transition: opacity var(--dur-hover) var(--ease-hover); }
.mk .mk__buy:hover { opacity: 0.85; }