/* =========================================================================
   Sparkling — Hero block
   -------------------------------------------------------------------------
   Values marked (tokens.md) are exact, taken verbatim from tokens.md
   → "Hero block". Values marked (inferred) are NOT in tokens.md — the token
   file has no typography for the brand wordmark, nav links, badge text, or
   button labels, and no primary-button text color; those are read off
   02-hero.png and flagged so you can replace them when tokens exist.
   ========================================================================= */

/* ---- Fonts (woff2, OTF fallback; GT Standard Trial) --------------------- */
/* Display optical size (L) — used by the H1 */
@font-face {
  font-family: "GT Standard Display";
  src: url("../fonts/GTStandard-L-Medium.woff2") format("woff2"),
       url("../fonts/GTStandard-L-Medium.otf")  format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Standard Display";
  src: url("../fonts/GTStandard-L-Regular.woff2") format("woff2"),
       url("../fonts/GTStandard-L-Regular.otf")  format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Text optical size (M) — subtitle, badge, nav, buttons, wordmark */
@font-face {
  font-family: "GT Standard Trial";
  src: url("../fonts/GTStandard-M-Regular.woff2") format("woff2"),
       url("../fonts/GTStandard-M-Regular.otf")  format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Standard Trial";
  src: url("../fonts/GTStandard-M-Medium.woff2") format("woff2"),
       url("../fonts/GTStandard-M-Medium.otf")  format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Monospace optical cut — badges ("GT Standard Mono Trial", weight 600) */
@font-face {
  font-family: "GT Standard Mono Trial";
  src: url("../fonts/GTStandardMono-Semibold.woff2") format("woff2"),
       url("../fonts/GTStandardMono-Semibold.otf")  format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Colors */
  --brand-white: #F8FCFF;                    /* (tokens.md) Brand-White */
  --brand-black: #00050B;                    /* (inferred) base black behind Opacity-Black-60 */
  --opacity-black-60: rgba(0, 5, 11, 0.60);  /* (tokens.md) Opacity-Black-60 — header bg */
  --opacity-8: rgba(248, 252, 255, 0.08);    /* (tokens.md) Opacity-8 — badge/secondary bg */

  --color-halftone-bg: #000000;              /* (hero-animation.json) exact */
  --color-halftone-fg: #3aa9ff;              /* (hero-animation.json) exact */

  /* Layout */
  --frame-width: 1440px;                     /* (tokens.md) header frame width */
  /* Shared content width — centered, uniform edge distance across all blocks.
     Stays 1280 on laptops/typical desktops (≤~1600px viewport, where 80vw≤1280
     floors to 1280), then grows on genuinely wide monitors so content isn't
     left stranded in the middle: 80vw at 1920 → ~1536, capped at 1680 for 2560+
     so line lengths stay readable. */
  --container: clamp(1280px, 80vw, 1680px);
  /* Adaptive side gutter. Scales with viewport so the fixed 1280 container
     never touches the screen edge on the 1440→mobile laptop/desktop range.
     = 80px at 1440 (design frame), tapers to a 24px floor, caps at 80px above.
     Blocks use `.block__inner { max-width: calc(var(--container) + 2*var(--gutter)); padding: <v> var(--gutter); }`
     so content still caps at 1280 on wide screens but keeps a real gutter below. */
  --gutter: clamp(24px, 5.56vw, 80px);
  --header-height: 64px;                     /* (tokens.md) */
  --header-pad-y: 14px;                       /* (tokens.md) */
  --header-pad-x: 80px;                       /* (tokens.md) */
  --blur: 12px;                               /* (tokens.md) backdrop-filter blur */

  /* Typography — H1 (tokens.md, exact) */
  --title-family: "GT Standard Display", "GT Standard Trial", system-ui, sans-serif;
  --title-size: clamp(52px, 6.944vw, 100px); /* = 100px at the 1440 frame */
  --title-weight: 500;
  --title-lh: 100%;
  --title-ls: -0.08em;                        /* -8px at 100px, kept as em to scale */

  /* Typography — Subtitle (tokens.md, exact) */
  --subtitle-family: "GT Standard Trial", system-ui, sans-serif;
  --subtitle-size: 20px;
  --subtitle-weight: 400;
  --subtitle-lh: 135%;
  --subtitle-ls: -1.4px;

  /* Badge (tokens.md for box; text typography inferred) */
  --badge-pad: 10px 14px 10px 12px;          /* (tokens.md) */
  --badge-gap: 12px;                          /* (tokens.md) */
  --badge-radius: 10px;                       /* (tokens.md) */
  --badge-text-size: 13px;                    /* (inferred) */
  --badge-text-weight: 500;                   /* (inferred) */
  --badge-text-ls: 0.12em;                    /* (inferred) uppercase tracking */
  --badge-text-color: var(--brand-white);     /* (inferred) */

  /* Buttons (tokens.md for box; label typography + primary text color inferred) */
  --btn-pad: 14px 19px;                       /* (tokens.md) */
  --btn-gap: 4px;                             /* (tokens.md) */
  --btn-radius: 16px;                         /* (tokens.md) */
  --btn-text-size: 18px;                      /* (inferred) */
  --btn-text-weight: 500;                     /* (inferred) */
  --btn-primary-text: var(--brand-black);     /* (inferred) dark on Brand-White */

  /* Header UI typography (not in tokens.md — inferred) */
  --wordmark-size: 22px;                      /* (inferred) */
  --wordmark-weight: 500;                     /* (inferred) */
  --nav-size: 16px;                           /* (inferred) */
  --nav-weight: 400;                          /* (inferred) */
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Pin the top: kill the elastic overscroll "rubber-band" so the page can't be
   pulled down to reveal empty space above the sticky header. */
html { overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
body {
  background: var(--color-halftone-bg);
  color: var(--brand-white);
  font-family: var(--subtitle-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

/* ---- Halftone canvas ---------------------------------------------------- */
#halftone {
  /* absolute (not fixed): the halftone is anchored to the top of the document
     and scrolls away together with the hero content instead of staying pinned
     to the viewport. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
}

/* Smooth scrolling for in-page anchor navigation (Launch/How-it-Works, footer
   Product links, etc.). scroll-margin-top offsets targets so the sticky header
   doesn't cover them; :where() keeps specificity at 0. */
html { scroll-behavior: smooth; }
:where(#advantages, #process, #agents, #blog, #cta, #perps, #swaps, #wallet) {
  scroll-margin-top: 84px;
}

/* Scroll-reveal: soft fade + rise as a section enters view. The `.reveal`
   hidden state is added by reveal.js (progressive enhancement); .is-visible is
   toggled on when the section intersects. Per-element stagger is an inline
   transition-delay set in JS. */
.reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
              filter .8s cubic-bezier(.22, .61, .36, 1),
              transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, filter, transform;
}
.reveal.is-visible { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ---- Load-in appearance (hero) -----------------------------------------
   Above-the-fold content isn't scroll-revealed, so it animates itself in on
   load: a soft blur → fade (+ slight rise), staggered element by element. The
   halftone flower fades in with it (see #halftone below + halftone.js). */
@keyframes appear-in {
  from { opacity: 0; filter: blur(14px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
.hero__content .badge,
.hero__title,
.hero__subtitle,
.hero__actions {
  animation: appear-in .9s cubic-bezier(.22, .61, .36, 1) both;
}
.hero__content .badge { animation-delay: .05s; }
.hero__title          { animation-delay: .18s; }
.hero__subtitle       { animation-delay: .34s; }
.hero__actions        { animation-delay: .48s; }

/* Halftone canvas fades in on load (class toggled by halftone.js once the
   flower is ready) so the silhouette appears smoothly, not instantly. */
#halftone { opacity: 0; transition: opacity 1.1s ease; }
#halftone.is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__content .badge,
  .hero__title,
  .hero__subtitle,
  .hero__actions { animation: none; }
  #halftone { opacity: 1; transition: none; }
}

/* ---- Hero layout -------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 1;
  /* fills the viewport below the sticky header */
  min-height: calc(100vh - var(--header-height) - 2 * var(--header-pad-y));
  display: flex;
  flex-direction: column;
}

/* Header — full-width bar, content constrained to the shared container */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--opacity-black-60);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
}
.site-header__inner {
  position: relative;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-pad-y) var(--gutter);
}
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 28px; width: auto; display: block; }
.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
}
.site-nav a {
  font-family: var(--subtitle-family);
  font-size: 14px;                      /* (tokens) */
  font-weight: 500;
  line-height: 112%;
  letter-spacing: -0.98px;
  color: rgba(248, 252, 255, 0.80);     /* Opacity-80 */
  transition: color .15s ease;
}
.site-nav a:hover { color: #F8FCFF; }

/* Hero content — left-aligned, constrained to the left half (horizontal layout) */
.hero__content {
  flex: 1;                          /* fills the space above the pinned logos → text centers in it */
  position: relative;
  z-index: 1;                       /* above the absolute hero__bottom glow strip */
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 0 var(--gutter);         /* vertical centering handled by flex, no bottom bias */
}
/* Keep the copy within roughly the left half so it doesn't run under the
   bright halftone silhouette on the right. */
.hero__content > * { max-width: 52%; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--badge-gap);
  padding: var(--badge-pad);
  border-radius: var(--badge-radius);
  background: var(--opacity-8);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  color: var(--badge-text-color);
  font-family: var(--subtitle-family);
  font-size: var(--badge-text-size);
  font-weight: var(--badge-text-weight);
  letter-spacing: var(--badge-text-ls);
  text-transform: uppercase;
  margin-bottom: 28px;              /* (inferred) badge → title gap */
}
.badge__icon { width: 16px; height: 16px; flex: none; }

/* Unified tag/badge text style — every light-on-dark tag pill across the site */
.badge__text,
.blog-tag__text {
  color: rgba(248, 252, 255, 0.80);     /* Opacity-80 */
  text-align: center;
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 112%;
  letter-spacing: 0.56px;
  text-transform: uppercase;
}

/* ---- Tag border-light animation ----------------------------------------
   A bright glint travels around each section tag's perimeter (a running stroke
   of light). Applied to every .badge — that's exactly the five section tags
   (Hero "AI TRADING AGENT", "ADVANTAGES", "UNDER TWO MINUTES", "AGENTS",
   "PARTNERSHIPS"). Blog card tags use .blog-tag and stay static. The tag's own
   fill / text / padding are untouched: this is a masked ring drawn on ::before,
   so only the 1.25px border edge lights up. */
@property --badge-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.badge { position: relative; }
.badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;                       /* ring thickness */
  background: conic-gradient(from var(--badge-angle),
              rgba(248, 252, 255, 0.05) 0deg,
              rgba(248, 252, 255, 0.05) 285deg,
              rgba(255, 255, 255, 0.90) 335deg,
              rgba(248, 252, 255, 0.05) 360deg);
  /* show only the border ring: border-box minus content-box */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.24;                         /* dim the glow — movement unchanged */
  animation: badge-sweep 3.2s linear infinite;
}
@keyframes badge-sweep { to { --badge-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .badge::before { animation: none; }
}

.hero__title {
  margin: 0;
  font-family: var(--title-family);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-lh);
  letter-spacing: var(--title-ls);
  /* letter-spacing (exact token) also shrinks the space glyph in CSS, which
     collapses the words; cancel that on spaces only so word gaps match the
     reference while intra-word tracking stays at -8px. */
  word-spacing: 0.08em;
  color: var(--brand-white);
}

.hero__subtitle {
  margin: 24px 0 0;                 /* (inferred) title → subtitle gap */
  font-family: var(--subtitle-family);
  font-size: var(--subtitle-size);          /* 20px */
  font-weight: var(--subtitle-weight);      /* 400 */
  line-height: var(--subtitle-lh);          /* 135% */
  letter-spacing: var(--subtitle-ls);       /* -1.4px */
  color: rgba(248, 252, 255, 0.80);         /* Opacity-80 (per spec) */
}

.hero__actions {
  display: flex;
  gap: 12px;                        /* (inferred) space between buttons */
  margin-top: 36px;                 /* (inferred) subtitle → actions gap */
}
.hero__actions .btn { height: 48px; }   /* non-header buttons are 48px tall */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad);
  border-radius: var(--btn-radius);
  font-family: var(--subtitle-family);
  font-size: var(--btn-text-size);
  font-weight: var(--btn-text-weight);
  line-height: 1;
  cursor: pointer;
  border: 0;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--brand-white);
  color: var(--btn-primary-text);
}
.btn--primary:hover { opacity: 0.92; }
.btn--secondary {
  background: var(--opacity-8);
  color: var(--brand-white);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
}
.btn--secondary:hover { background: rgba(248, 252, 255, 0.14); }
.btn__arrow { width: 18px; height: 18px; flex: none; }

/* Header CTA is a touch tighter vertically than the hero buttons */
.site-header__cta { padding: 10px 18px; font-size: 16px; border-radius: 12px; }

/* Vignette/shadow overlay above the halftone, below the hero content */
.hero__shadow {
  /* absolute so the vignette scrolls with the halftone canvas (both anchored to
     the top of the document), keeping them aligned. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: url("../../Shadow.svg") center / cover no-repeat;
}

/* =========================================================================
   Partner logos marquee — full-bleed strip at the bottom of the hero.
   Logos scroll right→left, loop seamlessly; edges fade to black via the
   exported bg-logos.png overlay (black at edges → transparent center).
   ========================================================================= */
.logos {
  position: relative;
  z-index: 1;                       /* above the hero__bottom glow strip */
  width: 100%;
  overflow: hidden;
  padding: 24px 0;
  margin-top: auto;                 /* pin to the bottom of the hero column */
}
/* Track = FOUR identical groups laid side by side; sliding it left by exactly
   one group (−25% of the 4-group track) puts each group where the previous one
   was → no jump. Four copies keep the loop seamless up to a ~3750px viewport
   (one group ≈ 1250px), so no gap appears even at 2560px. With only two copies
   the loop breaks once the viewport is wider than a single group (~1250px). */
.logos__track {
  display: flex;
  width: max-content;
  animation: logos-marquee 42s linear infinite;
}
.logos__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
/* Symmetric horizontal margin gives equal spacing between every logo,
   including across the group boundary — required for a seamless -50% loop. */
.logos__item {
  height: 32px;
  width: auto;
  margin: 0 40px;
  display: block;
  flex: none;
  -webkit-user-drag: none;
  user-select: none;
}
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }   /* one group of four */
}
/* Edge fade overlay (exported asset, stretched across the strip) */
.logos::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../../bg-logos.png") 50% 50% / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
}

/* Bottom glow strip — pinned to the very bottom of the hero, behind the logos
   marquee but above the fixed halftone canvas (it's inside .hero, z-index:1).
   Absolute so it does NOT take flow space (keeps the text centered in the space
   above the logos). Decorative, full-bleed. */
.hero__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* =========================================================================
   Advantages block — exact values from tokens2.md → "Advantages block".
   (inferred) = not in tokens2.md (card gap, badge/nav-arrow icon sizing,
   card-4 copy which is clipped in 03-advantages.png).
   ========================================================================= */
.advantages {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(180deg,
      var(--brand-black) 0%,
      rgba(0, 4, 8, 0) 13.96%,
      rgba(0, 0, 0, 0) 91.79%,
      var(--brand-black) 101.44%),
    url("../../Advantagesbg.png") 50% / cover no-repeat;
  background-color: var(--brand-black);
}
.advantages {
  --adv-card-w: 632px;
  --adv-card-h: 500px;
  --adv-card-gap: 24px;
}

.advantages__inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Centred header (tag + title) */
.advantages__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                            /* tag → title */
  text-align: center;
}
/* Shared left-aligned section tag (used by Agents). Restored to its original
   look — the earlier centring override here had broken the Agents tag. */
.badge--tag { margin-bottom: 0; align-self: flex-start; }
/* Advantages centres its own tag without touching the shared component. */
.advantages__head .badge--tag { align-self: center; margin-bottom: 0; }
.advantages__title {
  margin: 0;
  color: var(--brand-white);
  font-family: var(--subtitle-family);
  font-size: 42px;
  font-weight: 500;
  line-height: 112%;
  letter-spacing: -3.36px;
}

/* Carousel viewport — title → cards = 40px (per spec). Full-bleed band so cards
   peek to the screen edges; the shadow overlay darkens those edges. */
/* Full-bleed band (spans the true viewport width) that clips the peeking cards;
   the track inside is translated by JS for a seamless infinite loop. */
/* Full-bleed sibling of the inner: it already spans the section (screen) width,
   so the centred card is screen-centred with equal peeks — no 100vw / scrollbar
   offset. overflow:hidden clips the peeking neighbours. */
.advantages__viewport {
  position: relative;
  margin-top: 40px;
  width: 100%;
  overflow: hidden;
}
.advantages__track {
  display: flex;
  width: max-content;
  gap: var(--adv-card-gap);
  padding-block: 8px;
  will-change: transform;
  touch-action: pan-y;      /* vertical scroll passes to the page; JS drives X */
  cursor: grab;
}
.advantages__track.is-dragging { cursor: grabbing; }
/* Before JS upgrades it, fall back to a plain horizontal scroller. */
.advantages__track.is-static {
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--adv-card-w)) / 2));
}
.advantages__track::-webkit-scrollbar { display: none; }

/* Decorative shadow / vignette over the whole band. Never blocks pointer / swipe. */
.advantages__shadows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: url("../../Advantages-shadows.png") center center / 100% 100% no-repeat;
}

/* ---- Card — glass shell (spec: Opacity-5 + blur 40) applied to EVERY card ---- */
.adv-card {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 var(--adv-card-w);
  width: var(--adv-card-w);
  height: var(--adv-card-h);
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: rgba(248, 252, 255, 0.05);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  overflow: hidden;
  cursor: pointer;
  color: var(--brand-white);
}

/* Zones: title/desc pinned top, media centred in the flexible middle, tags
   pinned bottom — keeps the rhythm steady across states and cards. */
.adv-card__head {
  flex: none;
  min-height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.adv-card__title {
  margin: 0;
  font-family: var(--subtitle-family);
  font-size: 32px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -1.28px;
  color: var(--brand-white);
}
.adv-card__title span { display: block; }
.adv-card__title .dim { color: rgba(248, 252, 255, 0.50); }
.adv-card__desc {
  margin: 0;
  max-width: 250px;
  text-align: left;
  font-family: var(--subtitle-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 135%;
  letter-spacing: -0.4px;
  color: rgba(248, 252, 255, 0.80);
}

.adv-card__media {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* State illustrations stack and crossfade; each centred in the media band. */
.adv-card__illu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.975);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
  user-select: none;
}
.adv-card__illu.is-shown { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---- No seed · "Verifying" state — live, always-spinning loader ---------- */
.adv-verify {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 362px;
  max-width: 100%;
  height: 64px;
  border-radius: 12px;
  background:
    radial-gradient(rgba(120, 170, 200, 0.10) 1px, transparent 1.4px) 0 0 / 9px 9px,
    rgba(120, 170, 200, 0.03);
  color: rgba(248, 252, 255, 0.92);
  font-family: var(--subtitle-family);
  font-size: 17px;
  letter-spacing: -0.4px;
}
.adv-verify__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(90, 160, 255, 0.25);
  border-top-color: #3b9dff;
  animation: adv-spin 0.8s linear infinite;   /* always spins, independent of state cycle */
}
@keyframes adv-spin { to { transform: rotate(360deg); } }

/* ---- Typing cards — shared caret --------------------------------------- */
.pe-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.16em;
  background: currentColor;
  opacity: 0;
  animation: adv-caret 1s steps(1) infinite;
}
.is-typing .pe-caret { opacity: 1; }
@keyframes adv-caret { 50% { opacity: 0.15; } }

/* ---- Plain English · live input bar that types, then result slides in ---- */
.pe-media { overflow: hidden; }
.pe-input {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(360px, calc(100% - 72px));
  max-width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border-radius: 999px;
  background: rgba(248, 252, 255, 0.06);
  border: 1px solid rgba(248, 252, 255, 0.05);
  transition: box-shadow .35s ease, border-color .35s ease, opacity .4s ease, transform .4s ease;
  color: rgba(248, 252, 255, 0.92);
}
.pe-input.is-glow {
  border-color: rgba(59, 157, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(59, 157, 255, 0.14), 0 0 26px rgba(59, 157, 255, 0.28);
}
.pe-input__plus {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(248, 252, 255, 0.08);
  color: rgba(248, 252, 255, 0.7);
}
.pe-input__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--subtitle-family);
  font-size: 16px;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  color: rgba(248, 252, 255, 0.92);
}
.pe-input.is-placeholder .pe-input__typed { color: rgba(248, 252, 255, 0.4); }
.pe-input__mic {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(248, 252, 255, 0.9);
  color: #0d1117;
}
.pe-input.is-away { opacity: 0; transform: translate(-50%, -30%); }
.pe-result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 26px));
  width: auto;
  height: auto;             /* let width-capping scale height proportionally */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;      /* never distort — preserve the image's aspect ratio */
  opacity: 0;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.pe-result.is-in { opacity: 1; transform: translate(-50%, -50%); }

/* ---- You sign · request dialog (centred) types, then approve → sent -------- */
.ys-media { overflow: hidden; }
/* The request dialog sits in the CENTRE of the card (not pinned to the top). */
.ys-dialog {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;                 /* tighter bubble ↔ "Preparing" — a compact exchange */
  opacity: 0;
  transition: opacity .35s ease;
}
.ys-dialog.is-visible { opacity: 1; }
.ys-bubble {
  align-self: flex-end;
  max-width: 82%;
  box-sizing: border-box;
  padding: 9px 16px;
  border-radius: 16px 16px 4px 16px;
  background: rgba(248, 252, 255, 0.08);
  font-family: var(--subtitle-family);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: rgba(248, 252, 255, 0.92);
}
.ys-prep {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--subtitle-family);
  font-size: 15px;
  letter-spacing: -0.3px;
  color: #3b9dff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.ys-prep.is-visible { opacity: 1; transform: translateY(0); }
.ys-prep__spark {
  width: 16px; height: 16px;
  background: conic-gradient(from 0deg, #3b9dff, #7fc4ff, #3b9dff);
  -webkit-mask: repeating-conic-gradient(#000 0deg 12deg, transparent 12deg 30deg);
  mask: repeating-conic-gradient(#000 0deg 12deg, transparent 12deg 30deg);
  border-radius: 50%;
  animation: adv-spin 3s linear infinite;
}
/* Approve preview + Sent — centred at natural proportions; the transition
   between them is a soft scale-crossfade, like the swap reference. */
.ys-approve, .ys-sent {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.ys-approve { width: 340px; max-width: 84%; }
.ys-approve img { display: block; width: 100%; height: auto; }   /* keep aspect ratio */
.ys-sent { width: 300px; max-width: 78%; height: auto; }
.ys-approve.is-in, .ys-sent.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Approve "tap": a brief press on the whole card (swap-style), no highlight box. */
.ys-approve.is-tap { transform: translate(-50%, -50%) scale(0.965); transition: transform .12s ease; }

.adv-card__tags {
  flex: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.adv-tag {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(248, 252, 255, 0.04);
  border: 1px solid rgba(248, 252, 255, 0.08);
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(248, 252, 255, 0.60);
  white-space: nowrap;
}

/* ---- Perps card — the media zone hosts a live chart panel ---------------- */
.perps__panel {
  margin: 0 auto;
  width: 100%;
  max-width: 384px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(248, 252, 255, 0.06);
  background: rgba(248, 252, 255, 0.03);
}
.perps__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.perps__asset { position: relative; display: flex; align-items: center; gap: 10px; }
.perps__coin { display: block; width: 44px; height: 44px; flex: none; }
.perps__sym { font-family: var(--subtitle-family); font-size: 21px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.15; }
.perps__name { font-family: var(--subtitle-family); font-size: 14px; color: rgba(248, 252, 255, 0.45); }
.perps__quote { text-align: right; }
.perps__price { font-family: var(--subtitle-family); font-size: 17px; font-weight: 500; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.perps__chg { font-family: var(--subtitle-family); font-size: 13px; color: #05df72; font-variant-numeric: tabular-nums; }

.perps__chart {
  position: relative;
  height: 118px;
  border-radius: 10px;
  border: 1px solid rgba(248, 252, 255, 0.05);
  overflow: hidden;
}
.perps__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.perps__base { stroke: rgba(5, 223, 114, 0.45); stroke-width: 1; stroke-dasharray: 3 4; }
.perps__area { fill: url(#perpsFill); stroke: none; }
.perps__line { fill: none; stroke: #05df72; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.perps__dot { fill: #05df72; stroke: #eafff2; stroke-width: 1.5; paint-order: stroke; }
.perps__wave { animation: perps-breathe 5.5s ease-in-out infinite; transform-origin: center; }
@keyframes perps-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
.perps__pill {
  position: absolute;
  padding: 4px 9px;
  border-radius: 999px;
  background: #05df72;
  color: #04140c;
  font-family: var(--subtitle-family);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(5, 223, 114, 0.14);
  animation: perps-pill-pulse 2.4s ease-in-out infinite;
}
@keyframes perps-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(5, 223, 114, 0.10); }
  50%      { box-shadow: 0 0 0 6px rgba(5, 223, 114, 0.05); }
}
.perps__axis {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: rgba(248, 252, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .perps__wave, .perps__pill { animation: none; }
  .adv-card__illu { transition: none; }
  .adv-verify__spinner, .ys-prep__spark, .pe-caret { animation: none; }
}

/* =========================================================================
   Process block — exact values from tokens3.md → "Process block".
   NOTE: the badge specifies "GT Standard Mono Trial", which is NOT in the
   font folder (no mono cut) — falls back to a system monospace stack.
   No mobile adaptation yet (per request).
   ========================================================================= */
.process { background: var(--brand-black); position: relative; z-index: 1; }
.process__inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 80px var(--gutter);          /* (tokens3.md) vertical + adaptive side gutter */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;                            /* (tokens3.md) */
}

/* Title + badge wrapper */
.process__head {
  width: 608px;                         /* (tokens3.md) */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                            /* (tokens3.md) */
}
.badge--mono {
  margin-bottom: 0;
  /* (tokens3.md) GT Standard Mono Trial (weight 600) */
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 14px;                      /* (tokens3.md) */
  font-weight: 600;                     /* (tokens3.md) */
  line-height: 112%;                    /* (tokens3.md) */
  letter-spacing: 0.56px;               /* (tokens3.md) */
}
.process__title {
  margin: 0;
  text-align: center;
  color: var(--brand-white);            /* (tokens3.md) */
  font-family: var(--subtitle-family);  /* GT Standard Trial */
  font-size: 42px;                      /* (tokens3.md) */
  font-weight: 500;                     /* (tokens3.md) */
  line-height: 112%;                    /* (tokens3.md) */
  letter-spacing: -3.36px;              /* (tokens3.md) */
}

/* Phone + list wrapper */
.process__body {
  height: 508px;                        /* block height */
  display: flex;
  align-items: flex-start;
  gap: 16px;                            /* (tokens3.md) gap image <-> card */
  align-self: stretch;
}

/* Left: static phone composite (cross-fading step images). Fills the space left
   of the 16px gap + 416px card. In the 1280 container that's 848×508, whose
   aspect (1.669) ~ the image's (1.673) -> essentially no crop. */
.process__phone {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 508px;
  border-radius: 24px;
  overflow: hidden;
}
.process__phone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pin the TOP (sparkling header + top of the phone screen) so it never shifts
     as the container widens; cover then crops only the bottom, keeping the top
     of the composite consistent at any width. */
  object-position: top center;
  opacity: 0;
  z-index: 0;
  transition: opacity .3s ease;      /* match .p-item highlight (.3s) so both switch together */
}
.process__phone img.is-active {
  opacity: 1;
  z-index: 1;                         /* incoming shot paints ON TOP so it covers the outgoing one immediately — no lingering previous step */
}

/* Right: step list */
.process__list {
  flex: none;
  width: 416px;                         /* (tokens3.md) strict list width */
  height: 508px;                        /* match block height */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-item {
  width: 416px;                         /* (tokens3.md) strict item width */
  padding: 24px;                        /* (tokens3.md) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;             /* (tokens3.md) */
  gap: 8px;                             /* title -> description spacing (per request; tokens' 20 was container-wide) */
  border-radius: 16px;                  /* (tokens3.md, applies when selected) */
  background: transparent;              /* unselected: no bg */
  -webkit-backdrop-filter: blur(49.6px);
  backdrop-filter: blur(49.6px);        /* (tokens3.md) */
  cursor: pointer;
  /* Fill switches instantly, in lockstep with the description (display toggle,
     also instant) — a .3s fade here desynced the two on every step change. */
}
.p-item.is-active {
  background: rgba(248, 252, 255, 0.05);/* (tokens3.md) Opacity-5 */
}
.p-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;                            /* (tokens3.md) title+icon wrapper gap */
  align-self: stretch;
}
.p-item__title {
  color: var(--brand-white);            /* (tokens3.md) */
  font-family: var(--subtitle-family);
  font-size: 24px;                      /* (tokens3.md) */
  font-weight: 500;                     /* (tokens3.md) */
  line-height: 112%;                    /* (tokens3.md) */
  letter-spacing: -1.92px;              /* (tokens3.md) */
}
.p-item__icon { width: 28px; height: 28px; flex: none; }
.p-item__desc {
  display: none;                        /* unselected: description hidden */
  margin: 0;
  max-width: 264px;                     /* (tokens3.md) controls line wrapping */
  color: rgba(248, 252, 255, 0.50);     /* (tokens3.md) Opacity-50 */
  font-family: var(--subtitle-family);
  font-size: 16px;                      /* (tokens3.md) */
  font-weight: 400;                     /* (tokens3.md) */
  line-height: 135%;                    /* (tokens3.md) */
  letter-spacing: -1.12px;              /* (tokens3.md) */
}
.p-item.is-active .p-item__desc { display: block; }

/* =========================================================================
   Agents block — exact values from tokens4.md → "Agents block".
   (inferred) = badge text style + card descriptions for Perpetuals/
   Autostrategies/Predictions (only Swaps' copy is in 05-agents.png) + the pill
   shape glyphs. No mobile adaptation yet (per request).
   ========================================================================= */
.agents { background: var(--brand-black); position: relative; z-index: 1; }
.agents__inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 120px var(--gutter);         /* (tokens4.md) vertical + adaptive side gutter */
  display: flex;
  flex-direction: column;
  gap: 40px;                            /* (tokens4.md) */
}
.agents__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;              /* header is left-aligned (05-agents.png) */
  gap: 12px;                            /* badge -> title */
}
.agents__title {
  margin: 0;
  color: var(--brand-white);            /* (tokens4.md) */
  font-family: var(--subtitle-family);  /* GT Standard Trial */
  font-size: 42px;                      /* (tokens4.md) */
  font-weight: 500;                     /* (tokens4.md) */
  line-height: 112%;                    /* (tokens4.md) */
  letter-spacing: -3.36px;              /* (tokens4.md) */
}

/* 2x2 grid */
.agents__grid {
  display: grid;
  height: 640px;                        /* (tokens4.md) */
  gap: 16px;                            /* (tokens4.md) row+column gap */
  grid-template-rows: repeat(2, minmax(0, 1fr));    /* (tokens4.md) */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* (tokens4.md) */
  align-self: stretch;
}

/* Card */
.agent-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;                  /* (tokens4.md) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 252, 255, 0.05);/* (tokens4.md) Opacity-5 fallback */
}
.agent-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.agent-card__bg--hover { opacity: 0; transition: opacity .45s ease; }
.agent-card:hover .agent-card__bg--hover { opacity: 1; }

/* per-card background images (paths relative to this stylesheet) */
.agent--perpetuals     .agent-card__bg--default { background-image: url("../../Agents/Agents-Perpetuals-Default.png"); }
.agent--perpetuals     .agent-card__bg--hover   { background-image: url("../../Agents/Agents-Perpetuals-Hover.png"); }
.agent--autostrategies .agent-card__bg--default { background-image: url("../../Agents/Agents-Autostrategies-Defaul.png"); }
.agent--autostrategies .agent-card__bg--hover   { background-image: url("../../Agents/Agents-Autostrategies-Hover.png"); }
.agent--predictions    .agent-card__bg--default { background-image: url("../../Agents/Agents-Predictions-Defaul.png"); }
.agent--predictions    .agent-card__bg--hover   { background-image: url("../../Agents/Agents-Predictions-Hover.png"); }
.agent--swaps          .agent-card__bg--default { background-image: url("../../Agents/Agents-Swaps-Defaul.png"); }
.agent--swaps          .agent-card__bg--hover   { background-image: url("../../Agents/Agents-Swaps-Hover.png"); }

/* Centre label pill */
.agent-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;                            /* (tokens4.md) */
  padding: 12px 16px;                   /* (tokens4.md) */
  border-radius: 16px;                  /* (tokens4.md) */
  border: 8px solid #ECECEC;            /* (tokens4.md) Opacity-100 */
  background: var(--brand-white);       /* (tokens4.md) */
}
.agent-pill__icon { width: 14px; height: 14px; flex: none; display: block; }
.agent-pill__text {
  color: var(--brand-black);            /* (tokens4.md) */
  text-align: center;
  font-family: var(--subtitle-family);
  font-size: 24px;                      /* (tokens4.md) */
  font-weight: 500;                     /* (tokens4.md) */
  line-height: 112%;                    /* (tokens4.md) */
  letter-spacing: -1.92px;              /* (tokens4.md) */
}

/* Description tag (hover) */
.agent-desc {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;                         /* (inferred) inset, matches card h-padding */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;                            /* (tokens4.md) */
  padding: 10px 14px 10px 12px;         /* (tokens4.md) */
  border-radius: 10px;                  /* (tokens4.md) */
  background: var(--brand-white);       /* (tokens4.md) */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);          /* (tokens4.md) */
  color: var(--brand-black);            /* (tokens4.md) */
  text-align: center;
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", monospace;
  font-size: 14px;                      /* (tokens4.md) */
  font-weight: 600;                     /* (tokens4.md) */
  line-height: 112%;                    /* (tokens4.md) */
  letter-spacing: 0.56px;               /* (tokens4.md) */
  text-transform: uppercase;            /* (tokens4.md) */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.agent-card:hover .agent-desc { opacity: 1; transform: none; }

/* =========================================================================
   Blog block — exact values from tokens5.md → "Blog block".
   NOTE: 06-blog.png renders the featured card light with an unreadable title
   (export glitch); tokens5 specify a dark frosted card (Opacity-5) + white
   title, which is what's built here. Featured description is approximate
   (unreadable in the reference). No mobile adaptation yet.
   ========================================================================= */
.blog { background: var(--brand-black); position: relative; z-index: 1; }
.blog__inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 80px var(--gutter);          /* (tokens5.md) vertical + adaptive side gutter */
  display: flex;
  flex-direction: column;
  gap: 40px;                            /* (tokens5.md) */
}

/* Header row */
.blog__header {
  display: flex;
  justify-content: space-between;       /* (tokens5.md) */
  align-items: center;                  /* (tokens5.md) */
}
.blog__intro {
  width: 608px;                         /* (tokens5.md) */
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;                            /* (tokens5.md) */
}
.blog__title {
  margin: 0;
  color: var(--brand-white);           /* (tokens5.md) */
  font-family: var(--subtitle-family);
  font-size: 42px;                      /* (tokens5.md) */
  font-weight: 500;
  line-height: 112%;
  letter-spacing: -3.36px;             /* (tokens5.md) */
}
.blog__subtitle {
  margin: 0;
  color: var(--brand-white);           /* (tokens5.md) */
  font-family: var(--subtitle-family);
  font-size: 16px;                      /* (tokens5.md) */
  font-weight: 400;
  line-height: 135%;
  letter-spacing: -1.12px;             /* (tokens5.md) */
}
.blog__allposts {
  display: inline-flex;
  align-items: center;
  gap: 4px;                             /* (tokens5.md) */
  padding: 14px 19px;                   /* (tokens5.md) */
  color: var(--brand-white);           /* (tokens5.md) */
  font-family: var(--subtitle-family);
  font-size: 18px;                      /* (tokens5.md) */
  font-weight: 500;
  line-height: 112%;
  letter-spacing: -1.26px;             /* (tokens5.md) */
  border: 1px solid rgba(248, 252, 255, 0.16);  /* (inferred) outlined pill */
  border-radius: 16px;                  /* (inferred) */
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.blog__allposts:hover {
  border-radius: 16px;
  border-color: rgba(248, 252, 255, 0.32);
}
.blog__allposts svg { width: 18px; height: 18px; flex: none; }

/* Articles row */
.blog__row {
  display: flex;
  align-items: flex-start;              /* (tokens5.md) */
  gap: 16px;                            /* (tokens5.md) */
  align-self: stretch;
}

/* Shared tag pill (mono, uppercase) */
.blog-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;                            /* (tokens5.md) */
  padding: 10px 14px 10px 12px;         /* (tokens5.md) */
  border-radius: 10px;                  /* (tokens5.md) */
  background: var(--opacity-8);         /* (tokens5.md) Opacity-8 */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);          /* (tokens5.md) */
}
.blog-tag__text {
  color: var(--brand-white);           /* (tokens5.md) */
  text-align: center;
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", monospace;
  font-size: 14px;                      /* (tokens5.md) */
  font-weight: 600;
  line-height: 112%;
  letter-spacing: 0.56px;
  text-transform: uppercase;
}

/* Left featured article */
.blog-featured {
  width: 740px;                         /* (tokens5.md) */
  flex: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;            /* (tokens5.md) */
  align-items: flex-start;
  gap: 16px;                            /* (tokens5.md) */
}
.blog-featured__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;                  /* (inferred) matches card radius */
}
.blog-featured__card {
  flex: 1 0 0;                          /* (tokens5.md) fills remaining height */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;                            /* (tokens5.md) */
  padding: 24px;                        /* (tokens5.md) */
  border-radius: 24px;                  /* (tokens5.md) */
  background: rgba(248, 252, 255, 0.05);/* (tokens5.md) Opacity-5 */
  transition: background-color .15s ease;
}
.blog-featured__title {
  margin: 0;
  color: var(--brand-white);           /* (tokens5.md) */
  font-family: var(--subtitle-family);
  font-size: 32px;                      /* (tokens5.md) */
  font-weight: 500;
  line-height: 112%;
  letter-spacing: -2.56px;             /* (tokens5.md) */
}
.blog-featured__desc {
  margin: 0;
  color: rgba(248, 252, 255, 0.50);     /* (tokens5.md) Opacity-50 */
  font-family: var(--subtitle-family);
  font-size: 16px;                      /* (tokens5.md) */
  font-weight: 400;
  line-height: 135%;
  letter-spacing: -1.12px;
}

/* Right list of 3 articles */
.blog-list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.blog-item {
  height: 207px;                        /* (tokens5.md) */
  padding: 24px 16px;                   /* (tokens5.md) */
  display: flex;
  flex-direction: column;
  justify-content: center;              /* (tokens5.md) */
  align-items: flex-start;
  gap: 16px;                            /* (tokens5.md) */
  align-self: stretch;
  border-bottom: 1px solid var(--opacity-8);  /* (tokens5.md) */
  transition: background-color .15s ease, border-color .15s ease;
}
.blog-item:last-child { border-bottom: 0; }    /* no divider under the last article */

/* Article-card hover highlight (Blog) — fill only, no divider */
.blog-featured:hover .blog-featured__card,
.blog-item:hover {
  border-radius: 24px;
  background: var(--opacity-8);
  border-bottom-color: transparent;
}
.blog-item__title {
  margin: 0;
  color: var(--brand-white);           /* (tokens5.md) */
  font-family: var(--subtitle-family);
  font-size: 24px;                      /* (tokens5.md) */
  font-weight: 500;
  line-height: 112%;
  letter-spacing: -1.92px;             /* (tokens5.md) */
}
.blog-item__desc {
  margin: 0;
  color: var(--brand-white);           /* (tokens5.md) */
  font-family: var(--subtitle-family);
  font-size: 16px;                      /* (tokens5.md) */
  font-weight: 400;
  line-height: 135%;
  letter-spacing: -1.12px;
}

/* =========================================================================
   CTA block — exact values from tokens6.md → "CTA block".
   (inferred) = gap between the two partner cards + wallet icon tile
   (wallet 2.svg is a 40px glyph; TON's icon file is a full 80px tile, so the
   wallet glyph is placed on a matching blue tile). No mobile adaptation yet.
   ========================================================================= */
.cta { background: var(--brand-black); position: relative; z-index: 1; }
.cta__inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 120px var(--gutter);         /* (tokens6.md) vertical + adaptive side gutter */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;                            /* (tokens6.md) */
}

/* Banner card */
.cta-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;                            /* (tokens6.md) */
  padding: 44px 32px 32px;              /* (tokens6.md) */
  border-radius: 44px;                  /* (tokens6.md) */
  background:
    url("../../banner-image.png") 50% / cover no-repeat,
    var(--brand-black);                 /* (tokens6.md) */
}

/* Badge + title + description */
.cta-card__intro {
  width: 608px;                         /* (tokens6.md) */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                            /* (tokens6.md) */
}
.cta-card__title {
  margin: 0;
  text-align: center;
  color: var(--brand-white);           /* (tokens6.md) */
  font-family: var(--subtitle-family);
  font-size: 42px;                      /* (tokens6.md) */
  font-weight: 500;
  line-height: 112%;
  letter-spacing: -3.36px;             /* (tokens6.md) */
}
.cta-card__desc {
  margin: 0;
  color: var(--Opacity-80, rgba(248, 252, 255, 0.80));
  text-align: center;
  font-family: "GT Standard Trial VF", "GT Standard Trial", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 135%;
  letter-spacing: -1.4px;
}

/* Partner link cards */
.cta-partners {
  align-self: stretch;
  display: flex;
  gap: 16px;                            /* (inferred) gap between the two cards */
}
.cta-partner {
  flex: 1 0 0;                          /* (tokens6.md) */
  display: flex;
  align-items: center;
  gap: 16px;                            /* (tokens6.md) */
  padding: 24px;                        /* (tokens6.md) */
  border-radius: 32px;                  /* (tokens6.md) */
  background: var(--opacity-8);         /* (tokens6.md) Opacity-8 */
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);          /* (tokens6.md) */
  transition: background-color .2s ease;
}
.cta-partner:hover { background: rgba(248, 252, 255, 0.16); }  /* (tokens6.md) Opacity-16 */

.cta-partner__icon {
  width: 80px;                          /* (tokens6.md) */
  height: 80px;                         /* (tokens6.md) */
  flex: none;
  display: block;
  border-radius: 15px;                  /* matches TON tile (rx15) */
}
.cta-partner__icon--tile {              /* blue tile for the wallet glyph */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #009CFF;
}
.cta-partner__icon--tile img { width: 40px; height: 40px; display: block; }

.cta-partner__body {
  flex: 1 0 0;                          /* (tokens6.md) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;                             /* (tokens6.md) */
}
.cta-partner__title {
  color: var(--brand-white);           /* (tokens6.md) */
  font-family: var(--subtitle-family);
  font-size: 24px;                      /* (tokens6.md) */
  font-weight: 500;
  line-height: 112%;
  letter-spacing: -1.92px;             /* (tokens6.md) */
}
.cta-partner__text {
  color: var(--brand-white);           /* (tokens6.md) */
  font-family: var(--subtitle-family);
  font-size: 16px;                      /* (tokens6.md) */
  font-weight: 400;
  line-height: 135%;
  letter-spacing: -1.12px;
  opacity: 0.8;                         /* (tokens6.md) */
}
.cta-partner__chevron {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--brand-white);           /* (tokens6.md) */
  opacity: 0.5;                         /* (tokens6.md) default */
  transition: opacity .2s ease;
}
.cta-partner:hover .cta-partner__chevron { opacity: 1; }  /* (tokens6.md) */

/* =========================================================================
   Footer block — exact values from tokens7.md → "Footer block".
   Full-bleed footer-bg; content in the shared 1280 container. No mobile yet.
   ========================================================================= */
.footer {
  position: relative;
  z-index: 1;
  padding: 80px 0 40px;                 /* (tokens7.md) vertical (h via container) */
  background:
    url("../../BG.png") 50% 62% / cover no-repeat,
    var(--brand-black);
}
.footer__inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);             /* adaptive side gutter (vertical is on .footer) */
  display: flex;
  flex-direction: column;
  gap: 40px;                            /* (tokens7.md) */
}

/* Top row of columns */
.footer__top {
  display: flex;
  align-items: flex-start;              /* (tokens7.md) */
  gap: 24px;                            /* (tokens7.md) */
  align-self: stretch;
}
/* Wrapper around the 4 link columns — transparent on desktop so the columns
   remain direct flex children of .footer__top (becomes a 2×2 grid on mobile). */
.footer__cols { display: contents; }
.footer__brandcol {
  width: 428px;                         /* (tokens7.md) */
  flex: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;                            /* (tokens7.md) */
}
.footer__desc {
  margin: 0;
  color: rgba(248, 252, 255, 0.50);    /* Opacity-50 (user) */
  font-family: var(--subtitle-family);
  font-size: 16px;                      /* (tokens7.md) */
  font-weight: 400;
  line-height: 135%;
  letter-spacing: -1.12px;             /* (tokens7.md) */
}

.footer__col {
  flex: 1 0 0;                          /* (tokens7.md) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;                             /* list items 6px apart (user) */
}
.footer__coltitle {
  margin-bottom: 8px;                   /* keep title separated from the list */
  color: rgba(248, 252, 255, 0.50);    /* Opacity-50 (user) */
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", monospace;
  font-size: 14px;                      /* (tokens7.md) */
  font-weight: 600;
  line-height: 112%;
  letter-spacing: 0.56px;
  text-transform: uppercase;
}
.footer__col a {
  color: var(--brand-white);           /* (tokens7.md) */
  font-family: var(--subtitle-family);
  font-size: 16px;                      /* (tokens7.md) */
  font-weight: 400;
  line-height: 135%;
  letter-spacing: -1.12px;
  opacity: 0.9;
  transition: opacity .15s ease;
}
.footer__col a:hover { opacity: 1; }

/* Connect column — social buttons */
.footer__social {
  display: flex;
  align-items: center;
  gap: 8px;                            /* (tokens7.md) */
}
.footer__social-btn {
  width: 37px;                          /* (tokens7.md) */
  height: 37px;                         /* (tokens7.md) */
  padding: 8.5px;                       /* (tokens7.md) */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;                /* (tokens7.md) */
  background: var(--opacity-8);         /* (tokens7.md) Opacity-8 */
  -webkit-backdrop-filter: blur(49.6px);
  backdrop-filter: blur(49.6px);        /* (tokens7.md) */
  transition: background-color .15s ease;
}
.footer__social-btn:hover { background: rgba(248, 252, 255, 0.16); }
.footer__social-btn img { width: 20px; height: 20px; display: block; }

/* Bottom row */
.footer__bottom {
  align-self: stretch;                  /* (tokens7.md) width 1280 */
  padding-top: 40px;                    /* (tokens7.md) */
  border-top: 1px solid var(--opacity-8);  /* (tokens7.md) */
}
.footer__copy {
  color: rgba(248, 252, 255, 0.50);    /* Opacity-50 (user) */
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", monospace;
  font-size: 14px;                      /* (tokens7.md) */
  font-weight: 600;
  line-height: 112%;
  letter-spacing: 0.56px;
  text-transform: uppercase;           /* (tokens7.md) */
}

/* ---- Responsive: mobile (≤768px, reference 390px) ----------------------- */
/* Hero mobile — tokens-mobile.md "Hero — Mobile". Desktop (≥769px) untouched. */
@media (max-width: 768px) {
  /* Guard against sideways scroll while sections below the hero are still
     being adapted to mobile (their desktop widths overflow 390px). Removed
     naturally once every section is responsive. Desktop is unaffected. */
  /* root overflow-x clip removed: it promoted overflow-y to auto and broke
     vertical scroll on iOS Safari. The wide marquee (.logos) and carousel
     (.advantages viewport) already clip their own horizontal overflow. */

  /* Header: logo left + Launch App right (space-between), nav links dropped.
     Full-width bar, 14px 16px padding, black-60 bg + blur. */
  .site-header { background: rgba(0, 0, 0, 0.60); }
  .site-header__inner { max-width: none; padding: 14px 16px; }
  .site-nav { display: none; }

  /* Hero content: centered stack, 16px side gutter (buttons reach it too). */
  .hero__content {
    max-width: none;
    align-items: center;
    text-align: center;
    padding: 0 16px 8vh;
  }
  .hero__content > * { max-width: 100%; }   /* override the desktop 52% cap */

  /* Title 42px (tokens-mobile). Base word-spacing:0.08em (=3.36px @42px) exactly
     offsets the -3.36px tracking, so word gaps read normally — keep it. */
  .hero__title {
    font-size: 42px;
    line-height: 112%;
    letter-spacing: -3.36px;
  }
  /* Subtitle 16px (tokens-mobile). */
  .hero__subtitle {
    font-size: 16px;
    line-height: 135%;
    letter-spacing: -1.12px;
  }

  /* Buttons: full-width, stacked. */
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }

  /* Advantages — mobile (reworked carousel). Tag unchanged; section title stays
     32px and centred. Cards become 343×500 with the description stacked under the
     title; the decorative shadow overlay is dropped on mobile. Focus + infinite
     loop logic is untouched (advantages.js re-measures the card width on resize). */
  .advantages {
    padding: 72px 0;
    --adv-card-w: min(343px, calc(100vw - 32px));
    --adv-card-gap: 12px;
  }
  .advantages__inner { padding: 0 16px; }
  .advantages__title { font-size: 32px; line-height: 112%; letter-spacing: -2.56px; }
  .advantages__shadows { display: none; }

  /* Card head stacks vertically: title, then the description 16px below it
     (single column instead of the desktop two-column head). */
  .adv-card__head { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; }
  .adv-card__title { font-size: 28px; letter-spacing: -1.12px; }
  .adv-card__desc { max-width: none; }

  /* Uniform card tone: on mobile there's no shadow overlay to even out the
     backdrop, so the peeking cards were picking up the lighter/dottier bg through
     the glass. Use a solid dark base (matching the reference mobile cards) so the
     focused and unfocused cards read identically. */
  .adv-card { background: #0d131a; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Process — mobile. Block stacks: title → phone → step list (column).
     16px side padding so the phone (and badge/title/list) sit 16px from each
     screen edge, matching the reference. */
  .process__inner { padding: 80px 16px; }         /* inner gap already 40 (title → phone) */
  .process__head { align-items: flex-start; }     /* badge + title left-aligned */
  .process__title { font-size: 32px; line-height: 112%; letter-spacing: -2.56px; text-align: left; }

  /* Phone + list stack vertically, full width. */
  .process__body { flex-direction: column; align-items: stretch; height: auto; gap: 20px; }
  /* Phone image: width = 100vw − 32px (via the 16px inner padding), height
     proportional to the source (1696×1014) — no fixed height, no crop. */
  .process__phone { flex: none; width: 100%; height: auto; aspect-ratio: 1696 / 1014; }
  /* List fills the width; items go full-width (keep their 24px inner padding). */
  .process__list { width: 100%; height: auto; }
  .p-item { width: 100%; }
  .p-item__desc { max-width: none; }

  /* Agents — mobile. Same 4 cards (styles/content unchanged); the 2×2 grid
     becomes a horizontal scroll lane like the Advantages track, with taller
     portrait cards. 16px side padding aligns badge/title/first card to the edge. */
  .agents__inner { padding: 72px 16px; }
  .agents__title { font-size: 32px; line-height: 112%; letter-spacing: -2.56px; }

  .agents__grid {
    display: flex;
    height: auto;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-inline: 16px;
    /* bleed to the right screen edge so cards clip at the page edge (not the
       16px content edge) and the next card peeks — like the Advantages track;
       padding-right keeps a 16px trailing gutter as scroll space. */
    margin-right: -16px;
    padding-right: 16px;
  }
  .agents__grid::-webkit-scrollbar { display: none; }

  /* Card size (spec). */
  .agent-card {
    flex: none;
    width: 343px;
    height: 400px;
    padding: 132px 24px 79px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  /* No hover on touch — reveal the description tag inline (matches the
     reference); it flows below the pill inside the card padding. */
  .agent-desc {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    align-self: stretch;
  }
  /* No hover on touch → show the hover (brighter/crisper) background by default. */
  .agent-card__bg--hover { opacity: 1; }

  /* Blog — mobile. One vertical list: header stacks, then every article is the
     same card (incl. the former "featured", which keeps its image above). */
  .blog__inner { padding: 80px 16px; }

  /* Header: title → subtitle → All-posts, stacked, 16px apart. */
  .blog__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .blog__intro { width: 100%; gap: 16px; }        /* title → subtitle 16 */
  .blog__title { font-size: 32px; letter-spacing: -2.56px; }

  /* Articles: single column, 24px between every card. */
  .blog__row { flex-direction: column; align-items: stretch; gap: 24px; }
  .blog-list { gap: 24px; }

  /* Featured article: image above its card, 8px gap; card uses the shared style. */
  .blog-featured { width: auto; gap: 8px; }
  .blog-featured__card { flex: none; }

  /* Unified article-card style — the featured card already matches; turn the
     plain list items into the same card (drop the desktop divider/fixed height). */
  .blog-item {
    height: auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(248, 252, 255, 0.05);   /* Opacity-5 */
    border-bottom: 0;
  }

  /* Card title 24px (featured was 32 on desktop); item title already 24. */
  .blog-featured__title { font-size: 24px; letter-spacing: -1.92px; }
  /* Card description Opacity-50 (item desc was Brand-White on desktop). */
  .blog-item__desc { color: rgba(248, 252, 255, 0.50); }

  /* CTA — mobile. Banner card holds the intro and the two partner cards
     (now stacked vertically inside it). */
  .cta__inner { padding: 80px 16px; }
  .cta-card {
    padding: 44px 16px 16px;             /* (spec) */
    border-radius: 32px;                 /* (spec) was 44 */
    /* gap 40 (intro → partners) + align-items center kept from desktop */
  }
  .cta-card__title { font-size: 32px; letter-spacing: -2.56px; }

  /* Partner link cards: stacked. column-reverse puts Wallet (2nd in DOM) on
     top and TON below, matching the reference order. */
  .cta-partners { flex-direction: column-reverse; gap: 12px; }
  .cta-partner {
    position: relative;
    flex: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 24px;                           /* (spec) icon → title/text */
    padding: 24px 28px;                  /* (spec) */
    border-radius: 20px;                 /* (spec) was 32 */
  }
  .cta-partner__body { align-self: stretch; flex: none; }  /* full width → text wraps */
  /* Icon container 64×64 (was 80); keep the wallet glyph at half the tile. */
  .cta-partner__icon { width: 64px; height: 64px; }
  .cta-partner__icon--tile img { width: 32px; height: 32px; }
  /* Chevron pinned top-right, vertically centred on the 64px icon
     (24px top padding + (64−24)/2). */
  .cta-partner__chevron { position: absolute; top: 44px; right: 28px; }

  /* Footer — mobile. Brand on top, then the 4 columns as a 2×2 grid, then the
     divider + copyright. */
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;                           /* (spec) */
    padding: 80px 16px;                  /* (spec) side gutter 16 */
  }
  .footer__inner {
    max-width: none;
    width: 100%;                         /* fill .footer (align-self stretch alone
                                            doesn't, with align-items:center parent) */
    padding: 0;
    align-items: flex-start;             /* (spec) */
    align-self: stretch;                 /* (spec) fills .footer */
  }                                       /* gap 40 kept from base */

  /* Top: brand stacked above the columns grid. */
  .footer__top { flex-direction: column; align-items: stretch; gap: 40px; }
  .footer__brandcol { width: auto; }     /* was 428 — full width now */

  /* The 4 link columns as a 2×2 grid (spec). */
  .footer__cols {
    display: inline-grid;
    align-self: stretch;
    width: 100%;                         /* inline-grid won't stretch on its own */
    row-gap: 24px;
    column-gap: 24px;
    grid-template-rows: repeat(2, fit-content(100%));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  /* Social buttons wrap to 2×2 inside the narrow CONNECT column; 36×36 (spec). */
  .footer__social {
    display: grid;
    grid-template-columns: repeat(2, 36px);
    gap: 8px;
    width: max-content;
  }
  .footer__social-btn { width: 36px; height: 36px; }
}

/* =========================================================================
   Legal / document pages (privacy, terms, cookies, imprint).
   Plain readable text on the solid brand-dark background — shares the site
   header/footer + fonts, but NO halftone canvas or decorative background.
   ========================================================================= */
body.legal-page { background: var(--brand-black); color: var(--brand-white); }
.legal {
  max-width: calc(720px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 56px var(--gutter) 96px;
}
.legal__eyebrow { display: inline-flex; margin-bottom: 20px; }
.legal__title {
  margin: 0 0 12px;
  font-family: var(--title-family);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 500;
  line-height: 108%;
  letter-spacing: -0.03em;
  color: var(--brand-white);
}
.legal__updated {
  margin: 0 0 40px;
  font-family: "GT Standard Mono Trial", ui-monospace, "SF Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 252, 255, 0.50);
}
.legal__lead { color: rgba(248, 252, 255, 0.88); font-size: 18px; }
.legal h2 {
  margin: 44px 0 14px;
  font-family: var(--subtitle-family);
  font-size: 26px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--brand-white);
}
.legal h3 {
  margin: 28px 0 10px;
  font-family: var(--subtitle-family);
  font-size: 19px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.01em;
  color: var(--brand-white);
}
.legal p,
.legal li {
  font-family: var(--subtitle-family);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: rgba(248, 252, 255, 0.72);
}
.legal p { margin: 0 0 16px; }
.legal ul,
.legal ol { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal li::marker { color: rgba(248, 252, 255, 0.40); }
.legal strong { color: var(--brand-white); font-weight: 600; }
.legal a { color: #4db4ff; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: #7fcaff; }
.legal hr { border: 0; border-top: 1px solid var(--opacity-8); margin: 40px 0; }
.legal__table-wrap { overflow-x: auto; margin: 0 0 24px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--subtitle-family);
}
.legal th,
.legal td {
  text-align: left;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--opacity-8);
  vertical-align: top;
  color: rgba(248, 252, 255, 0.72);
}
.legal th { color: var(--brand-white); font-weight: 600; white-space: nowrap; }