/* Page-specific overrides for what-a-stablecoin-development-company-builds.
   Loaded last, after rwa-glossary.css, because the rules below deliberately
   override blog-details.css, real-world-asset-tokenization-guide.css and
   rwa-glossary.css. Moving this earlier in the head would break them.
   Everything else on this page reuses common.css, blog.css, blog-details.css,
   real-world-asset-tokenization-guide.css and rwa-glossary.css as-is. */

/* blog-details.css sets this pill to dark text on a green fill, then
   rwa-glossary.css strips the fill without restoring a readable colour,
   which leaves the date invisible. Restore the outlined treatment. */
.bx-updated-pill {
    background: none;
    border: 1px solid #57E0A8;
    color: #fff;
    font-weight: 400;
    margin-left: 12px;
    display: inline-block;
}

/* blog-details.css leaves only 20px under the byline, which reads as
   cramped against the table of contents that follows it. */
.blog-single-wrap .bx-meta-strip {
    margin-bottom: 34px;
}

/* The .rwa-process lifecycle diagram is reused from
   real-world-asset-tokenization-guide.css, where it is laid out as a HEXAGON
   (.n1-.n6) on an r=235 ring for that page's six-step process. This article has
   seven layers, so the nodes are re-placed on a heptagon and a seventh is added.

   The ring also has to open out. Seven 186px-wide cards do not fit at r=235:
   nodes 1-2, 7-1 and 4-5 end up closer than their combined half-widths, so those
   cards touch and the ring segment between them is hidden behind them. At r=290
   there is ~41px between cards 1-2 and 7-1 and ~66px between 4-5, so every
   segment of the ring stays visible. The canvas grows 800 -> 900 tall to keep the
   wider ring clear of the subtitle above and the hint below, and the hub moves to
   the new centre (490,500).

   All of it is scoped to this one diagram's id, so the six-step version on the
   real-estate page is untouched. */
#stablecoinLayers {
    aspect-ratio: 980 / 900;
}

#stablecoinLayers .rwa-process__card {
    height: 900px;
}

#stablecoinLayers .hub {
    top: 500px;
}

#stablecoinLayers .n1 { left: 490px;   top: 210px; }
#stablecoinLayers .n2 { left: 716.7px; top: 319.2px; }
#stablecoinLayers .n3 { left: 772.7px; top: 564.5px; }
#stablecoinLayers .n4 { left: 615.8px; top: 761.3px; }
#stablecoinLayers .n5 { left: 364.2px; top: 761.3px; }
#stablecoinLayers .n6 { left: 207.3px; top: 564.5px; }
#stablecoinLayers .n7 { left: 263.3px; top: 319.2px; }

/* Seven labels are longer than the six on the source diagram, so give the node
   a little more room and let the longest ones wrap to two lines cleanly. */
#stablecoinLayers .node {
    width: 186px;
}

/* The always-running dot that travels the ring. The shared rule's dash pattern
   (16 620, offset -636) is tuned to the SIX-sided ring's 1410px perimeter. This
   ring is a heptagon: side = 2 * 290 * sin(pi/7) = 251.65, so perimeter = 1761.6.
   Using half of that as the pattern length puts exactly two dots on the ring,
   evenly spaced, and the offset equals one pattern so the loop is seamless. */
#stablecoinLayers .ring-flow {
    stroke-dasharray: 16 864.8;
    animation: sc-ringflow 7s linear infinite;
}

@keyframes sc-ringflow {
    to { stroke-dashoffset: -880.8; }
}

@media (prefers-reduced-motion: reduce) {
    #stablecoinLayers .ring-flow {
        animation: none;
    }
}

/* The source diagram tints the hub and the step pill with the active node's
   colour. Here the hub stays one fixed deep blue and a white arrow inside it
   turns to point at the active layer instead, so the centre reads as a compass
   rather than changing colour seven times. */
#stablecoinLayers .hub-inner {
    background: #0A3380;
    box-shadow: 0 10px 24px -8px rgba(10, 51, 128, .5);
}

#stablecoinLayers .hub-arrow {
    width: 34px;
    height: 34px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50% 50%;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

#stablecoinLayers .hub-step {
    background: #0A3380;
}

/* The arrow's turn is decoration, not information - the step pill and the
   highlighted node already say which layer is active. */
@media (prefers-reduced-motion: reduce) {
    #stablecoinLayers .hub-arrow {
        transition: none;
    }
}

/* The source title gradient is purple; this article's artwork is blue. */
#stablecoinLayers .rwa-title span {
    background: linear-gradient(97deg, #4A9EFF, #0A3380 90%);
    -webkit-background-clip: text;
    background-clip: text;
}


/* real-world-asset-tokenization-guide.css caps .cta-mid at max-width: 720px,
   which leaves it 136px short of the 856px article column on desktop. That
   file is shared with six other pages, so the cap is lifted here instead:
   width is already 100%, so the box simply fills the column at every width. */
.blog-single-wrap .cta-mid {
    max-width: none;
}