/* ==========================================================================
   Tokenization — institutional research-note layout.

   Near-monochrome: ink / navy / warm CineNow paper, one blue reserved for
   links only. No decorative illustration, no glow, no continuous motion.
   Structure carries the design: a strict two-column spine (a sticky number
   rail + content column) held on one vertical axis from the hero to the
   final disclosure, numbered sections, hairline rules that draw in on entry,
   big light display type, tables and numbered ledgers. Built on
   variables.css tokens; scoped under `.tkx`; reuses the shared [data-reveal]
   fade system. No new fonts, colours or dependencies.
   ========================================================================== */

.tkx {
  --tkx-hair: rgba(17, 24, 39, 0.13);
  --tkx-rule: rgba(17, 24, 39, 0.30);
  --tkx-measure: 62ch;
  --tkx-rail: clamp(150px, 14vw, 190px);
  --tkx-gap: clamp(2rem, 0.5rem + 5vw, 6rem);
}

/* content links only — never the .btn component */
.tkx-prose a { color: var(--color-yellow-deep); text-decoration: underline; text-underline-offset: 3px; }
.tkx-prose a:hover { color: var(--text-primary); }

/* ==========================================================================
   HERO — shares the section spine: kicker in the rail, everything else
   in the content column, so hero copy aligns to section copy exactly.
   ========================================================================== */
.tkx-hero {
  position: relative;
  padding-top: calc(var(--nav-h, 74px) + clamp(3rem, 2rem + 5vw, 7rem));
  padding-bottom: clamp(4rem, 3rem + 5vw, 7.5rem);
}

/* Sections separate by an alternating background band (paper ↔ deeper beige),
   the same rhythm as index.html — no hairline dividers needed. */

/* ==========================================================================
   HERO — dark, full-bleed. 45/55 split: copy left, a seven-node hexagon
   lattice right. Pure CineNow ink base; the one reserved accent shows only
   on the node dots. Lattice draws in on entry, then a slow ambient pulse
   with an occasional point of light travelling a connector.
   ========================================================================== */
.tkx-hero--dark {
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h, 74px) + clamp(3rem, 2rem + 4vw, 5.5rem)) 0 clamp(2rem, 1.25rem + 2vw, 3.25rem);
  background: var(--color-dark);
  overflow: hidden;
  isolation: isolate;
}
.tkx-hero--dark::after { display: none; }            /* navy → paper edge is its own divider */
.tkx-hero--dark .container { position: relative; z-index: 1; }
.tkx-hero--dark .tkx-kicker      { color: rgba(248, 245, 239, 0.55); }
.tkx-hero--dark .tkx-hero__title { color: #F8F5EF; font-weight: var(--fw-medium); }
.tkx-hero--dark .tkx-hero__lead  { color: rgba(248, 245, 239, 0.74); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.55; }

.tkx-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  width: 100%;
}
.tkx-hero__copy { max-width: 34rem; }

/* ---- Node network ------------------------------------------------------- */
.tkx-hero__viz { justify-self: end; width: 100%; max-width: 540px; }
.tkx-hexnet { display: block; width: 100%; height: auto; overflow: visible; }

/* base connectors — faint dotted lattice structure, always shown once revealed */
.tkx-hexnet__link {
  stroke: rgba(148, 163, 184, 0.18);
  stroke-width: 1;
  stroke-dasharray: 2 3.5;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out) 0.4s;
}
.tkx-hexnet__hex   { stroke: rgba(148, 163, 184, 0.24); stroke-width: 1.2; }
.tkx-hexnet__facet { stroke: rgba(148, 163, 184, 0.13); stroke-width: 1; }
.tkx-hexnet__hex,
.tkx-hexnet__facet {
  opacity: 0;
  transform: scale(0.55);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.7s var(--ease-out) var(--d, 0s),
    transform 0.7s var(--ease-out) var(--d, 0s),
    stroke 0.25s var(--ease-out);
}
.tkx-hexnet__dot {
  fill: var(--color-yellow-deep);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.5s var(--ease-out) calc(var(--d, 0s) + 0.2s),
    fill 0.25s var(--ease-out);
}
.tkx-hexnet__halo {
  fill: var(--color-yellow-deep);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
/* "connection forming" overlay — the segment itself draws solid along its path
   (pathLength=100, so the wipe is length-independent). One at a time. */
.tkx-hexnet__wire {
  stroke: rgba(203, 213, 225, 0.62);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.tkx-hero__viz.is-visible .tkx-hexnet__link { opacity: 1; }
.tkx-hero__viz.is-visible .tkx-hexnet__hex,
.tkx-hero__viz.is-visible .tkx-hexnet__facet { opacity: 1; transform: scale(1); }

/* Connections form one at a time, centre-out then point-to-point, wandering the
   lattice on a long 40s cycle. Each draw ~1.2s, then a ~2s pause. When a segment
   completes, the receiving node's dot lifts briefly — a light acknowledgment. */
.tkx-hero__viz.is-visible .tkx-hexnet__wire {
  animation: tkx-wire 40s linear infinite;
  animation-delay: calc(var(--seg, 0) * 3.2s);
}
.tkx-hero__viz.is-visible .tkx-hexnet__dot {
  opacity: 0.72;
  animation: tkx-dot-glow 40s linear infinite;
  animation-delay: var(--gd, 9999s);
}
.tkx-hero__viz.is-visible .tkx-hexnet__halo {
  animation: tkx-halo 40s linear infinite;
  animation-delay: var(--gd, 9999s);
}

@keyframes tkx-wire {
  0%    { stroke-dashoffset: 100; opacity: 0; }
  0.4%  { opacity: 0.9; }
  3.4%  { stroke-dashoffset: 0;   opacity: 0.9; }
  7%    { stroke-dashoffset: 0;   opacity: 0.9; }
  11%   { stroke-dashoffset: 0;   opacity: 0; }
  100%  { stroke-dashoffset: 0;   opacity: 0; }
}
@keyframes tkx-dot-glow {
  0%, 100% { opacity: 0.72; fill: var(--color-yellow-deep); }
  0.5%     { opacity: 1;    fill: var(--color-yellow); }
  4%       { opacity: 1;    fill: var(--color-yellow); }
  9%       { opacity: 0.72; fill: var(--color-yellow-deep); }
}
@keyframes tkx-halo {
  0%, 100% { opacity: 0;    transform: scale(0.6); }
  0.5%     { opacity: 0.26; transform: scale(0.78); }
  8%       { opacity: 0;    transform: scale(1.85); }
}

/* hover — quiet acknowledgment, pointer devices only */
@media (hover: hover) {
  .tkx-hexnet__node:hover .tkx-hexnet__hex { stroke: rgba(248, 245, 239, 0.55); }
  .tkx-hexnet__node:hover .tkx-hexnet__dot { fill: var(--color-yellow); opacity: 1; }
}

/* ---- Navbar legibility while the transparent nav sits over the dark hero -- */
body:has(.tkx-hero--dark) .nav:not(.is-scrolled) .nav__link { color: rgba(248, 245, 239, 0.82); }
body:has(.tkx-hero--dark) .nav:not(.is-scrolled) .nav__link.is-active { color: #F8F5EF; }
body:has(.tkx-hero--dark) .nav:not(.is-scrolled) .nav__logo { filter: brightness(0) invert(1); }
body:has(.tkx-hero--dark) .nav:not(.is-scrolled) .btn--nav-cta { border: 1px solid rgba(248, 245, 239, 0.28); }
body:has(.tkx-hero--dark) .nav:not(.is-scrolled) .nav__toggle {
  background: transparent; border-color: rgba(248, 245, 239, 0.3);
}
body:has(.tkx-hero--dark) .nav:not(.is-scrolled) .nav__toggle span,
body:has(.tkx-hero--dark) .nav:not(.is-scrolled) .nav__toggle span::before,
body:has(.tkx-hero--dark) .nav:not(.is-scrolled) .nav__toggle span::after { background: #F8F5EF; }

.tkx-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.tkx-hero__title {
  margin-top: clamp(1.25rem, 0.9rem + 2vw, 2rem);
  max-width: 19ch;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 1.45rem + 2vw, 3.45rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-hero);
  color: var(--text-primary);
  text-wrap: balance;
}
.tkx-hero__lead {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--text-secondary);
  text-wrap: pretty;
}
/* ==========================================================================
   SECTION SYSTEM — numbered, two-column spine, hairline-ruled
   ========================================================================== */
.tkx-sec {
  position: relative;
  padding-block: clamp(3.75rem, 2.75rem + 3.5vw, 6.25rem);
  scroll-margin-top: calc(var(--nav-h, 74px) + 3.25rem);
}
/* Alternating band — paper base ↔ deeper beige, matching index.html.
   Applied to sections 02 / 04 / 06 (backing, security, advisory). */
.tkx-sec--alt { background: var(--bg-elevated-2); }

/* ==========================================================================
   HOW IT WORKS — centered "How it works" overline at the top of the section
   (same treatment / rhythm as index's .section-kicker), then an editorial
   two-column composition on the HERO container:
   left  = heading / drawn rule / two paragraphs / five process boxes
   right = "In practice" heading + hairline + three numbered rows
   ========================================================================== */
.tkx-hiw__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  grid-template-areas:
    "explain practice"
    "steps   steps";
  column-gap: clamp(2rem, 0.5rem + 4vw, 4.5rem);
  row-gap: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  align-items: stretch;
}
.tkx-hiw__explain  { grid-area: explain; min-width: 0; }
.tkx-hiw__practice {
  grid-area: practice;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tkx-hiw__steps    { grid-area: steps; }

/* ---- Left: heading → drawn rule → two paragraphs ---- */
.tkx-hiw__explain .tkx-prose {
  margin-top: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem);
  max-width: 46ch;
}
.tkx-hiw__explain .tkx-prose p {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.62;
  color: var(--text-secondary);
}
.tkx-hiw__explain .tkx-prose p + p {
  margin-top: clamp(1.5rem, 1.1rem + 1vw, 2rem);
}

/* ---- Five compact process boxes — one equal row spanning the grid ---- */
.tkx-hiw__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
}
.tkx-hiw__step {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 0.35rem + 0.7vw, 0.9rem);
  padding: clamp(0.85rem, 0.65rem + 0.8vw, 1.15rem);
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: transform 0.28s var(--ease-out),
              border-color 0.28s var(--ease-out),
              box-shadow 0.28s var(--ease-out);
}
.tkx-hiw__step-n {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  transition: color 0.28s var(--ease-out);
}
.tkx-hiw__step-l {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(0.88rem, 0.8rem + 0.35vw, 1.05rem);
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  hyphens: none;
  word-break: keep-all;
}
@media (hover: hover) {
  .tkx-hiw__step:hover {
    transform: translateY(-3px);
    border-color: var(--glass-border-strong);
    box-shadow: var(--shadow-sm);
  }
  .tkx-hiw__step:hover .tkx-hiw__step-n { color: var(--color-yellow-deep); }
}

/* ---- Right: "In practice" — a heading matched to "How it works" on the left,
        same drawn-hairline treatment, then three editorial rows ---- */
.tkx-hiw__practice .tkx-subhead {
  position: relative;
  margin: 0;
  padding-bottom: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  text-align: left;
  text-transform: none;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
.tkx-hiw__practice .tkx-subhead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--fade-line);
}
.tkx-hiw__practice .tkx-ledger {
  max-width: none;
  margin-top: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem);
  border-bottom: 0;
  /* fill the column so the three rows span from subhead to the exact bottom
     of the left paragraph block — both columns end on the same line */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* shared 3D vanishing point for the flip reveal */
  perspective: 1400px;
  perspective-origin: center top;
}
.tkx-hiw__practice .tkx-ledger { margin-bottom: 0; }
.tkx-hiw__practice .tkx-ledger::after { display: none; }   /* rows end at the column bottom, no closing line */
.tkx-hiw__practice .tkx-ledger__item {
  grid-template-columns: minmax(0, 3rem) minmax(0, 1fr);
  gap: clamp(1.1rem, 0.7rem + 1.6vw, 2rem);
  padding-block: clamp(1.4rem, 1.05rem + 1.4vw, 2rem);
  align-items: baseline;
}
.tkx-hiw__practice .tkx-ledger__item:first-child { padding-top: 0; }
.tkx-hiw__practice .tkx-ledger__item:first-child::before { display: none; }
.tkx-hiw__practice .tkx-ledger__item:last-child { padding-bottom: 0; }
.tkx-hiw__practice .tkx-ledger__n {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--text-tertiary);
  transition: color 0.3s var(--ease-out);
}
.tkx-hiw__practice .tkx-ledger__d {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}
.tkx-hiw__practice .tkx-ledger__c { transition: transform 0.3s var(--ease-out); }
.tkx-hiw .tkx-ledger__d strong {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

@media (hover: hover) {
  .tkx-hiw__practice .tkx-ledger__item:hover .tkx-ledger__c { transform: translateX(4px); }
  .tkx-hiw__practice .tkx-ledger__item:hover .tkx-ledger__n { color: var(--color-yellow-deep); }
}

/* Reveal: opacity + 20px rise for everything in the section by default. */
.tkx-hiw [data-reveal="up"]:not(.is-visible) { transform: translate3d(0, 20px, 0); }

/* ---- "In practice" rows: sequential 3D card-flip reveal ----
   Each row is observed on its own by initReveal (IntersectionObserver), so
   01 lands, then 02, then 03 as the reader scrolls; [data-stagger] on the
   <ol> adds an 80ms beat between them. Once .is-visible is set the row is
   unobserved — it never re-animates. A shallow rotateX about the top edge
   (subtle, no bounce / zoom / spin) plus opacity + a small rise. */
.tkx-hiw__practice .tkx-ledger__item {
  transform-origin: center top;
  backface-visibility: hidden;
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.tkx-hiw__practice .tkx-ledger__item[data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: rotateX(-16deg) translate3d(0, 22px, 0);
}
.tkx-hiw__practice .tkx-ledger__item[data-reveal].is-visible {
  opacity: 1;
  transform: rotateX(0deg) translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .tkx-hiw__practice .tkx-ledger__item {
    transition: none;
  }
  .tkx-hiw__practice .tkx-ledger__item[data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tkx-hiw__step,
  .tkx-hiw__step-n,
  .tkx-hiw__practice .tkx-ledger__c,
  .tkx-hiw__practice .tkx-ledger__n { transition: none; }
  .tkx-hiw__step:hover { transform: none; box-shadow: none; }
  .tkx-hiw__practice .tkx-ledger__item:hover .tkx-ledger__c { transform: none; }
}

/* ---- Tablet: tighten the gutter ---- */
@media (max-width: 1024px) {
  .tkx-hiw__grid { column-gap: clamp(1.5rem, 0.5rem + 3vw, 3rem); }
  .tkx-hiw__steps { gap: clamp(0.5rem, 0.3rem + 0.8vw, 0.85rem); }
}

/* ---- Stack: eyebrow → heading → paragraphs → boxes → in practice.
        Five boxes become a clean vertical stack — all identical, no orphan. ---- */
@media (max-width: 960px) {
  .tkx-hiw__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "explain" "steps" "practice";
    row-gap: clamp(2.75rem, 2rem + 3vw, 4rem);
  }
  .tkx-hiw__explain .tkx-prose { max-width: var(--tkx-measure); }
  .tkx-hiw__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    max-width: var(--tkx-measure);
  }
  .tkx-hiw__step {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
    padding: clamp(1rem, 0.8rem + 1vw, 1.35rem) clamp(1rem, 0.8rem + 1vw, 1.4rem);
  }
  .tkx-hiw__step-n { flex: none; }
  /* stacked: no heading to line up with, no height to fill */
  .tkx-hiw__practice { padding-top: 0; }
  .tkx-hiw__practice .tkx-ledger {
    max-width: var(--tkx-measure);
    flex: 0 1 auto;
    display: block;
  }
  .tkx-hiw__practice .tkx-ledger__item:last-child { padding-bottom: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); }
}
@media (max-width: 560px) {
  .tkx-hiw__practice .tkx-ledger__item {
    grid-template-columns: minmax(0, 2rem) minmax(0, 1fr);
    gap: 0.9rem;
  }
  .tkx-hiw__practice .tkx-ledger__n { font-size: 1.3rem; }
}

/* ==========================================================================
   EDITORIAL TWO-COLUMN — "What backs the token" & "Regulatory approach".
   Heading + its partition-line divider (left), vertically centred against a
   controlled-measure paragraph (right). No overline, no numeral.
   ========================================================================== */
.tkx-edt { padding-block: clamp(3.75rem, 2.75rem + 3.5vw, 6rem); }
.tkx-edt__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 0.5rem + 4vw, 4.5rem);
  align-items: center;
}
.tkx-edt__head { min-width: 0; }
/* the partition line sits directly under the heading text, not the 26ch box */
.tkx-edt__head .tkx-sec__title {
  width: fit-content;
  max-width: 100%;
}
.tkx-edt__body {
  min-width: 0;
  max-width: 52ch;
  margin-top: 0;
}
.tkx-edt__body p { line-height: 1.75; }

/* gentle reveal — fade + 18px rise */
.tkx-edt [data-reveal="up"]:not(.is-visible) { transform: translate3d(0, 18px, 0); }

@media (max-width: 960px) {
  .tkx-edt__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    align-items: start;
  }
  .tkx-edt__body { max-width: var(--tkx-measure); }
}

.tkx-sec__grid {
  display: grid;
  grid-template-columns: var(--tkx-rail) minmax(0, 1fr);
  gap: var(--tkx-gap);
  align-items: start;
}
.tkx-sec__label {
  position: sticky;
  top: calc(var(--nav-h, 74px) + clamp(1.75rem, 1rem + 2vw, 3rem));
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.85rem;
}
.tkx-sec__label::after {
  content: "";
  width: 1px; height: clamp(40px, 6vw, 72px);
  background: var(--tkx-rule);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.8s var(--ease-out) 0.1s;
}
.tkx-sec__label.is-visible::after { transform: scaleY(1); }
.tkx-num {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.7rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: rgba(17, 24, 39, 0.22);
  transition: color 0.45s var(--ease-out);
}
.tkx-sec__label.is-active .tkx-num { color: var(--text-primary); }
.tkx-sec__body { min-width: 0; }

.tkx-sec__title {
  position: relative;
  max-width: 26ch;
  padding-bottom: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
.tkx-sec__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--fade-line);   /* same partition line used across the site */
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.85s var(--ease-out) 0.12s;
}
.tkx-sec__title.is-visible::after { transform: scaleX(1); }
.tkx-sec__title--sm { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }

.tkx-prose {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  max-width: var(--tkx-measure);
}
.tkx-prose p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.tkx-prose p + p { margin-top: 1em; }
.tkx-prose strong { color: var(--text-primary); font-weight: var(--fw-medium); }

.tkx-subhead {
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ==========================================================================
   NUMBERED LEDGER  (In practice · Security / custody / compliance)
   ========================================================================== */
.tkx-ledger { position: relative; max-width: 780px; list-style: none; margin: 0; padding: 0; }
.tkx-ledger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--fade-line);   /* site-wide partition line */
}
.tkx-prose + .tkx-ledger { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.tkx-ledger__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
  gap: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  padding-block: clamp(1.6rem, 1rem + 2vw, 2.4rem);
}
.tkx-ledger__item::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--fade-line);
}
.tkx-ledger__n {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-tertiary);
  transition: color 0.35s var(--ease-out);
}
.tkx-ledger__item:hover .tkx-ledger__n { color: var(--text-primary); }
.tkx-ledger__t {
  font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-regular); letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}
.tkx-ledger__d {
  margin-top: 0.5rem;
  max-width: 58ch;
  font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary);
  text-wrap: pretty;
}

/* ==========================================================================
   SECURITY, CUSTODY & COMPLIANCE — two-column editorial: heading + intro
   (left) · numbered ledger (right). Reuses .tkx-sec__title, .tkx-prose and
   the .tkx-ledger component; only the split grid + a smaller numeral + the
   hover nudge are new.
   ========================================================================== */
/* keep the whole section on one screen — tighter than the site-wide band */
.tkx-scc { padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6.5rem); }

/* left/right edges flush with the hero & every other section (.container) */
.tkx-scc__grid {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.tkx-scc__lead {
  min-width: 0;
  position: sticky;
  top: calc(var(--nav-h, 74px) + clamp(1.5rem, 1rem + 2vw, 2.75rem));
}
.tkx-scc__intro { margin-top: clamp(1.35rem, 1rem + 1.4vw, 2rem); }
.tkx-scc__intro p { font-size: var(--fs-sm); line-height: 1.6; }

/* right list: small number stacked above a medium subheading, one-line note.
   Plain type hierarchy — a hairline rule between items, no box, no icon. */
.tkx-scc__list { max-width: none; }
.tkx-scc__list .tkx-ledger__item {
  display: block;
  padding-block: clamp(1.05rem, 0.75rem + 1.4vw, 1.55rem);
}
.tkx-scc__list .tkx-ledger__item:first-child { padding-top: 0; }
.tkx-scc__list .tkx-ledger__item:first-child::before { display: none; }
.tkx-scc__list .tkx-ledger__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--text-tertiary);
  transition: color 0.3s var(--ease-out);
}
.tkx-scc__list .tkx-ledger__t {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  transition: color 0.3s var(--ease-out);
}
.tkx-scc__list .tkx-ledger__d {
  margin-top: 0.3rem;
  max-width: none;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

@media (hover: hover) {
  .tkx-scc__list .tkx-ledger__item:hover .tkx-ledger__n { color: var(--text-secondary); }
  .tkx-scc__list .tkx-ledger__item:hover .tkx-ledger__t { color: var(--color-yellow-deep); }
}

/* shorter reveal travel — fade + 18px rise, staggered per item via data-stagger */
.tkx-scc [data-reveal="up"]:not(.is-visible) { transform: translate3d(0, 18px, 0); }

/* tablet / mobile: stack, keep reading order (heading → intro → list) */
@media (max-width: 960px) {
  .tkx-scc__grid { grid-template-columns: 1fr; gap: clamp(2rem, 1.25rem + 3vw, 3.25rem); }
  .tkx-scc__lead { position: static; }
  .tkx-scc__list { max-width: var(--tkx-measure); }
}

/* ==========================================================================
   STEPPED LIST  (What backs the token)
   ========================================================================== */
.tkx-steps {
  position: relative;
  max-width: 640px;
  margin: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem) 0 0;
  padding: 0 0 0 1.75rem;
  list-style: none;
  border-bottom: 1px solid var(--tkx-hair);
}
.tkx-steps::before {
  content: "";
  position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 1px; background: var(--tkx-rule);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.9s var(--ease-out);
}
.tkx-steps.is-visible::before { transform: scaleY(1); }
.tkx-steps__row {
  position: relative;
  padding-block: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
}
.tkx-steps__row + .tkx-steps__row { border-top: 1px solid var(--tkx-hair); }
.tkx-steps__row::before {
  content: "";
  position: absolute; left: calc(-1.75rem + 1px); top: 1.5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-base);
  border: 1.5px solid var(--tkx-rule);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.tkx-sec--risk .tkx-steps__row::before { background: var(--bg-elevated-2); }
.tkx-steps__row--key::before { background: var(--text-primary); border-color: var(--text-primary); }
.tkx-steps__row:hover::before { border-color: var(--text-primary); transform: scale(1.25); }
.tkx-steps__t {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-snug);
  line-height: 1.3;
  color: var(--text-primary);
}
.tkx-steps__row--key .tkx-steps__t { font-weight: var(--fw-medium); }
.tkx-steps__note {
  display: block; margin-top: 3px;
  font-size: var(--fs-xs); font-style: italic; color: var(--text-tertiary);
}

/* ==========================================================================
   INVESTOR ACCESS — centered header + three equal cards.
   Wrapper width matches the hero and every other section (.container).
   Card surface/border/shadow reuse the site card system (.outcome / .plate).
   ========================================================================== */
.tkx-ia__wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- centered header: heading → short supporting line --- */
.tkx-ia__head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.tkx-ia__head .tkx-sec__title {
  max-width: 20ch;
  margin: 0 auto;
  padding-bottom: 0;
}
.tkx-ia__head .tkx-sec__title::after { display: none; }
.tkx-ia__head .tkx-ia__intro {
  margin: clamp(1rem, 0.7rem + 1.2vw, 1.6rem) auto 0;
  max-width: 52ch;
}
.tkx-ia__head .tkx-ia__intro p {
  font-size: var(--fs-sm);
  line-height: 1.62;
}

/* --- three cards --- */
.tkx-ia__cards {
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 0.5rem + 2vw, 2rem);
  align-items: stretch;
}
.tkx-ia__card {
  display: flex;
  flex-direction: column;
  gap: clamp(1.15rem, 0.85rem + 1.2vw, 1.75rem);
  padding: clamp(1.6rem, 1.15rem + 2vw, 2.6rem);
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tkx-ia__icon {
  display: block;
  color: var(--text-tertiary);
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.tkx-ia__icon svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
}
.tkx-ia__t {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}
.tkx-ia__d {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

@media (hover: hover) {
  .tkx-ia__card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-strong);
    box-shadow: var(--shadow-md);
  }
  .tkx-ia__card:hover .tkx-ia__icon {
    transform: translateY(-2px);
    color: var(--text-secondary);
  }
}

/* fade + 18px rise, staggered per card via [data-stagger] */
.tkx-ia [data-reveal="up"]:not(.is-visible) { transform: translate3d(0, 18px, 0); }

/* tablet + mobile: stack to one column — cards stay identical and balanced,
   same vertical layout as desktop, full width, no stretched odd-one-out */
@media (max-width: 960px) {
  .tkx-ia__cards {
    grid-template-columns: 1fr;
    max-width: 34rem;
    gap: clamp(1rem, 0.7rem + 1.5vw, 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tkx-ia__card,
  .tkx-ia__icon { transition: none; }
  .tkx-ia__card:hover { transform: none; }
  .tkx-ia__card:hover .tkx-ia__icon { transform: none; }
}

/* ==========================================================================
   ADVISORY — centered editorial block: heading → text → Blockphrase logo.
   Logo sits greyscale, resolving to full colour on hover.
   ========================================================================== */
.tkx-adv { padding-block: clamp(3.75rem, 2.75rem + 3.5vw, 6rem); }
.tkx-adv__inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.tkx-adv__title { max-width: none; margin-inline: auto; padding-bottom: 0; }
.tkx-adv__title::after { display: none; }
.tkx-adv__text {
  margin: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) auto 0;
  max-width: 56ch;
  line-height: 1.75;
}
/* "Blockphrase" in the copy reads as normal text — no link colour, no underline */
.tkx-adv__text a {
  color: inherit;
  text-decoration: none;
}

.tkx-adv__lockup {
  position: relative;
  display: flex; justify-content: center;
  margin-top: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);
  padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
}
.tkx-adv__lockup::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 20rem); height: 1px; background: var(--fade-line);
}
.tkx-adv__lockup a { display: block; line-height: 0; }
.tkx-adv__logo {
  height: clamp(26px, 22px + 0.6vw, 32px); width: auto; display: block;
  filter: grayscale(1); opacity: 0.9;
  transition: filter 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
@media (hover: hover) {
  .tkx-adv__lockup a:hover .tkx-adv__logo { filter: grayscale(0); opacity: 1; }
}
.tkx-adv [data-reveal="up"]:not(.is-visible),
.tkx-risk [data-reveal="up"]:not(.is-visible) { transform: translate3d(0, 18px, 0); }

/* ==========================================================================
   RISK DISCLOSURE — centered: bold heading + partition line + disclaimer.
   ========================================================================== */
.tkx-risk { padding-block: clamp(3.75rem, 2.75rem + 3.5vw, 6rem); }
.tkx-risk__inner {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}
.tkx-risk__title {
  font-weight: 600;
  max-width: none;
  margin-inline: auto;
}
.tkx-risk__title::after { left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; width: min(100%, 14rem); }
.tkx-risk__title.is-visible::after { transform: translateX(-50%) scaleX(1); }
.tkx-risk__text {
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) auto 0;
  max-width: none;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.tkx-risk__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tkx-risk__text a:hover { color: var(--text-primary); }

/* Progress bar: an ink hairline on this monochrome page, not the gold default */
body:has(.tkx) .scroll-progress { background: var(--color-ink); height: 2px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Collapse every two-column section at one consistent breakpoint */
@media (max-width: 960px) {
  .tkx-hero--dark { min-height: 0; }
  .tkx-hero__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 4rem); }
  .tkx-hero__copy { max-width: none; }
  .tkx-hero__viz { justify-self: center; max-width: 360px; order: 2; }
}

@media (max-width: 560px) {
  .tkx-ledger__item { grid-template-columns: 1fr; gap: 0.35rem; }
  .tkx-hero__title { max-width: none; }
}

/* ==========================================================================
   REDUCED MOTION — hairlines settle to their drawn state, no transitions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tkx-steps::before,
  .tkx-sec__label::after,
  .tkx-sec__title::after {
    transition: none;
    transform: none;
  }
  .tkx-num { transition: none !important; }
  .tkx-hexnet__link,
  .tkx-hexnet__hex,
  .tkx-hexnet__facet,
  .tkx-hexnet__dot,
  .tkx-hero__viz.is-visible .tkx-hexnet__dot,
  .tkx-hero__viz.is-visible .tkx-hexnet__halo {
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
    transition: none !important;
    animation: none !important;
  }
  .tkx-hexnet__link { opacity: 1; }
  .tkx-hexnet__dot,
  .tkx-hero__viz.is-visible .tkx-hexnet__dot { opacity: 0.8; fill: var(--color-yellow-deep); }
  .tkx-hexnet__halo,
  .tkx-hexnet__wire { display: none; }
}