/* Editorial compositions: live type, real asset symbols, no synthetic product photos. */
.designed-visual { position: relative; background: transparent; padding: 26px; border: 0; box-shadow: none; }
.audience-art.designed-visual { height: auto; min-height: 350px; padding-bottom: 26px; }
.topic-visual.designed-visual { height: auto; min-height: 310px; display: flex; align-items: center; }
#stage-art, #topic-art { width: 100%; }
.visual-overline { font-size: 10px; letter-spacing: .1em; color: #a4d7fa; font-weight: 600; text-align: center; margin-bottom: 25px; }
.visual-footnote { font-size: 10px; line-height: 1.7; color: #b2cbe3; text-align: center; margin-top: 22px; }
.design-symbol { display: block; object-fit: contain; width: 32px; height: 32px; flex-shrink: 0; }
.asset-symbol { display: block; object-fit: contain; width: 38px; height: 38px; flex-shrink: 0; }
.designed-visual img.design-symbol, .method-designed img.design-symbol { width: 32px; height: 32px; object-fit: contain; }
.designed-visual img.asset-symbol, .method-designed img.asset-symbol { width: 38px; height: 38px; object-fit: contain; }
.app-glass-icon {
  position: relative; display: grid; place-items: center; width: 92px; height: 92px; flex-shrink: 0;
  border: 0; border-radius: 27px;
  background: transparent;
  box-shadow: none;
}
.app-glass-icon:after { display: none; }
.app-glass-icon img.design-symbol { width: 47px; height: 47px; }
.bright-icon { background: transparent; }
.asset-deck { display: flex; flex-direction: column; gap: 10px; }
.asset-profile { display: flex; align-items: center; gap: 12px; padding: 17px 15px; border: 0; border-radius: 18px; background: #c5e9ff06; box-shadow: none; }
.asset-profile strong { display: block; color: #f0f7ff; font-size: 15px; }
.asset-profile > div { min-width: 0; }
.asset-profile span { text-wrap: pretty; }
.asset-profile span { display: block; color: #b9d0e6; font-size: 10px; margin-top: 2px; }
.asset-profile > b { margin-left: auto; color: #bbdef7; font-size: 10px; font-weight: 500; }
.bitcoin-profile, .ethereum-profile, .stable-profile { margin: 0; }
.custody-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.custody-pair > div { text-align: center; }
.custody-pair .app-glass-icon { margin: 0 auto 19px; }
.custody-pair strong { display: block; color: #edf7ff; font-size: 14px; }
.custody-pair span { display: block; color: #bfd2e7; font-size: 12px; line-height: 1.7; margin-top: 7px; }
.material-note { border-top: 1px solid #a4d7ff26; padding-top: 19px; margin-top: 24px; color: #c6e3f7; font-size: 12px; text-align: center; }
.rights-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rights-paper { padding: 23px 15px; border: 1px solid #bddfff21; border-radius: 22px; background: #bddfff06; box-shadow: none; text-align: center; }
.rights-paper > img { margin: 7px auto 20px; }
.rights-paper strong { display: block; font-size: 20px; color: #eff7ff; }
.rights-paper > span:last-child { font-size: 11px; display: block; color: #b4cee7; line-height: 1.7; margin-top: 9px; }
.token-paper { background: #bddfff06; }
.token-disc { display: grid; place-items: center; flex-shrink: 0; width: 62px; height: 62px; margin: 0 auto 14px; font-size: 11px; letter-spacing: .025em; font-weight: 650; color: #e6f6ff; border-radius: 50%; border: 1px solid #b5e8ff99; background: radial-gradient(at 25% 0, #c1efff77, transparent 65%), linear-gradient(145deg, #459ddc, #07518f); box-shadow: inset 0 2px 1px #d0f3ff66, inset 0 -4px 7px #00275088, 0 5px 15px #0003; }
.rights-paper .token-disc { width: 49px; height: 49px; font-size: 9px; margin-bottom: 10px; }
.rights-paper > img.design-symbol, .rights-paper > .token-disc { width: 50px; height: 50px; margin: 0 auto 18px; }
.rights-paper > img.design-symbol { padding: 8px; border-radius: 50%; background: #d0eaff0c; border: 1px solid #badfff33; }
.rights-paper > .token-disc { background: #d0eaff0c; border: 1px solid #badfff33; box-shadow: none; color: #d9efff; }
.crypto-roles { width: 100%; }
.crypto-roles .visual-overline { font-size: 8px; }
.role-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.role-row + .role-row { border-top: 1px solid #adddff1f; }
.role-row strong { display: block; color: #edf6ff; font-size: 17px; }
.role-row span { display: block; color: #b5d1e9; font-size: 11px; margin-top: 2px; }
.security-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 26px; }
.security-heading .app-glass-icon { width: 65px; height: 65px; border-radius: 20px; }
.security-heading .app-glass-icon:after { border-radius: 15px; }
.security-heading .app-glass-icon img { width: 34px; height: 34px; }
.security-heading > div > span { font-size: 7px; letter-spacing: .08em; color: #8cccf4; }
.security-heading strong { display: block; color: #edf7ff; font-size: 17px; line-height: 1.45; margin-top: 6px; }
.security-rule { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid #badfff22; }
.security-rule > span { font-size: 10px; color: #9abbd6; }
.security-rule strong { display: block; font-size: 12px; color: #e0effb; margin-top: 3px; }
.security-study .visual-footnote { font-size: 9px; }
.token-study-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.token-study-head .token-disc { margin: 0; width: 56px; height: 56px; font-size: 10px; }
.token-study-head > div > span { color: #9bd5f7; font-size: 7px; letter-spacing: .07em; }
.token-study-head strong { display: block; font-size: 17px; color: #f0f7ff; margin-top: 6px; }
.token-spec { border-top: 1px solid #c0e5ff26; padding: 12px 0; }
.token-spec span { color: #97bbd9; font-size: 10px; display: block; }
.token-spec strong { display: block; color: #ddebfa; font-size: 13px; margin-top: 3px; font-weight: 500; }
.purchase-head { display: flex; align-items: center; gap: 15px; color: #a1d6fb; font-size: 9px; letter-spacing: .07em; margin-bottom: 24px; }
.price-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.price-compare > div { padding: 19px 13px; background: linear-gradient(135deg, #c9eaff20, transparent), #193a5c88; border-radius: 19px; border: 1px solid #c2e7ff33; box-shadow: inset 0 1px 0 #e9f9ff33; }
.price-compare > div:last-child { border-color: #a3d9ff99; background-color: #1163a65e; }
.price-compare span { display: block; font-size: 9px; color: #c5dbed; white-space: nowrap; text-align: center; }
.price-compare strong { display: block; font-size: 35px; letter-spacing: -.05em; color: #f0f8ff; margin-top: 12px; text-align: center; white-space: nowrap; }
.price-compare small { font-size: 11px; margin-right: 3px; letter-spacing: 0; }
.purchase-caption { text-align: center; margin-top: 23px; }
.purchase-caption strong, .purchase-caption span { display: block; }
.purchase-caption strong { font-size: 13px; color: #e4f5ff; }
.purchase-caption span { font-size: 11px; color: #b3cee6; margin-top: 5px; }
.purchase-study .visual-footnote { font-size: 9px; }
.topic-visual.designed-visual { padding: 0; min-height: 300px; overflow: visible; background: none; }
.topic-cutout { width: 100%; position: relative; }
.topic-cutout > img { display: block; width: 100%; height: auto; max-height: 285px; object-fit: contain; }
.cutout-labels { display: grid; grid-template-columns: 1fr 1fr; color: #dceafb; text-align: center; font-size: 12px; padding: 0 7%; margin-top: 2px; }
.cutout-labels.three { grid-template-columns: 1.2fr .8fr 1fr; padding: 0 5%; }

/* Method: allocation, contextual layers, and an actual animated path. */
.method-picture.method-designed { height: auto; min-height: 285px; }
.method-illustration { width: 100%; }
.method-illustration > img { display: block; width: 100%; height: 285px; object-fit: contain; }
.method-picture.method-progress { border: 0; background: none; box-shadow: none; }
.method-progress .method-illustration > img { height: 285px; }
.portfolio-study { width: 100%; padding: 26px; border-radius: 28px; border: 1px solid #badfff3b; background: linear-gradient(135deg, #aedcff18, transparent), #0c2745d9; box-shadow: inset 0 1px 0 #e4f7ff3b, 0 18px 45px #0003; }
.portfolio-heading { display: flex; align-items: center; gap: 10px; color: #afdfff; font-size: 9px; letter-spacing: .11em; }
.portfolio-heading img.design-symbol { width: 25px; height: 25px; }
.portfolio-content { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 22px; margin-top: 25px; }
.allocation-ring { width: 126px; height: 126px; border-radius: 50%; padding: 15px; transform: rotate(-90deg); background: conic-gradient(#ffa92f 0 50%, #6087ff 50% 80%, #6ce2ff 80% 100%); box-shadow: inset 0 0 0 1px #fff5, 0 7px 22px #0003; }
.allocation-ring > div { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #0b2540; transform: rotate(90deg); box-shadow: 0 0 0 1px #ebf8ff44, inset 0 4px 12px #0004; }
.allocation-ring img { opacity: .7; }
.allocation-list { min-width: 0; }
.allocation-list > div { display: flex; align-items: center; gap: 9px; padding: 11px 0; }
.allocation-list > div + div { border-top: 1px solid #c4e9ff22; }
.allocation-list img.asset-symbol { width: 26px; height: 26px; }
.allocation-list span { color: #daeafd; font-size: 12px; }
.allocation-list b { margin-left: auto; font-size: 11px; color: #a6d8fc; }
.portfolio-study .visual-footnote { font-size: 9px; margin-top: 20px; }
.concept-study { display: flex; align-items: center; gap: 28px; padding: 20px 0; width: 100%; }
.concept-icon { width: 112px; height: 112px; border-radius: 32px; }
.concept-icon:after { border-radius: 27px; }
.concept-icon img.design-symbol { width: 59px; height: 59px; }
.concept-cards { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.concept-cards > div { padding: 16px 20px; border: 0; border-radius: 19px; background: #d7eeff08; box-shadow: none; }
.concept-cards > div:nth-child(2) { margin: 0; }
.concept-cards strong { display: block; font-size: 15px; color: #edf8ff; }
.concept-cards span { display: block; color: #bad3e9; font-size: 11px; margin-top: 3px; }
.method-picture.method-progress { padding: 30px 20px; min-height: 285px; display: flex; flex-direction: column; background: none; border: 0; border-radius: 28px; }
#method-visual-2 { width: 100%; }
.progress-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: center; padding-bottom: 27px; }
.progress-tiles .app-glass-icon { width: 85px; height: 85px; margin: auto; border-radius: 25px; }
.progress-tiles .app-glass-icon:after { border-radius: 20px; }
.method-progress .journey-rail { margin-top: 0; }
.journey-labels { color: #d0e4f6; }

@media (max-width: 1100px) and (min-width: 851px) {
  .designed-visual { padding: 22px; }
  .portfolio-content { grid-template-columns: 108px 1fr; gap: 15px; }
  .allocation-ring { width: 108px; height: 108px; padding: 13px; }
  .concept-study { gap: 18px; }
  .concept-icon { width: 95px; height: 95px; }
  .progress-tiles { gap: 15px; }
  .progress-tiles .app-glass-icon { width: 73px; height: 73px; }
}
@media (max-width: 850px) {
  .audience-panel { grid-template-columns: 1fr; text-align: center; }
  .audience-panel > div > p, .benefit-list { margin-left: auto; margin-right: auto; }
  .benefit-list { list-style: none; padding-left: 0; }
  .audience-art.designed-visual { width: 100%; max-width: 460px; margin: auto; text-align: left; }
  .method-row { gap: 36px; }
  #topic-panel { grid-template-columns: 1fr; text-align: center; }
  .topic-visual.designed-visual { max-width: 420px; width: 100%; margin: auto; text-align: left; }
  .method-picture { min-width: 0; }
  .portfolio-content { grid-template-columns: 95px 1fr; gap: 15px; }
  .allocation-ring { width: 95px; height: 95px; padding: 12px; }
  .portfolio-study { padding: 23px; }
  .allocation-list span { font-size: 11px; }
  .concept-study { gap: 18px; }
  .concept-icon { width: 85px; height: 85px; border-radius: 25px; }
  .concept-icon img.design-symbol { width: 44px; height: 44px; }
  .concept-cards > div { padding: 13px 15px; }
  .concept-cards span { font-size: 10px; }
  .progress-tiles { gap: 10px; }
  .progress-tiles .app-glass-icon { width: 68px; height: 68px; border-radius: 20px; }
  .progress-tiles .app-glass-icon:after { border-radius: 15px; }
  .progress-tiles .app-glass-icon img.design-symbol { width: 38px; height: 38px; }
}
@media (max-width: 600px) {
  .designed-visual { padding: 23px 19px; }
  .topic-visual.designed-visual { max-width: none; width: 100%; min-height: 0; padding: 24px 18px; text-align: left; }
  .topic-visual.designed-visual { padding: 0; }
  .topic-cutout > img { height: auto; max-height: 250px; }
  .audience-art.designed-visual { min-height: 0; padding: 24px 17px; }
  .asset-profile { gap: 11px; padding: 15px 11px; }
  .asset-profile strong { font-size: 14px; }
  .asset-profile span { font-size: 10px; }
  .asset-profile > b { font-size: 9px; }
  .bitcoin-profile, .ethereum-profile, .stable-profile { margin: 0; }
  .asset-profile img.asset-symbol { width: 32px; height: 32px; }
  .visual-overline { font-size: 9px; margin-bottom: 23px; }
  .custody-pair { gap: 14px; }
  .custody-pair .app-glass-icon { width: 76px; height: 76px; border-radius: 23px; }
  .custody-pair strong { font-size: 12px; }
  .custody-pair span { font-size: 10px; }
  .material-note { font-size: 11px; }
  .rights-paper { padding: 21px 10px; }
  .rights-paper strong { font-size: 18px; }
  .rights-paper > span:last-child { font-size: 10px; }
  .role-row { padding: 15px 0; gap: 15px; }
  .role-row strong { font-size: 17px; }
  .role-row span { font-size: 12px; }
  .security-heading strong { font-size: 16px; }
  .price-compare strong { font-size: 33px; }
  .price-compare > div { padding: 18px 10px; }
  .price-compare span { font-size: 9px; }
  .purchase-study .visual-footnote { font-size: 9px; }
  .method-picture.method-designed { max-width: 380px; width: 100%; min-height: 0; }
  .portfolio-study { padding: 23px 20px; }
  .portfolio-content { grid-template-columns: 105px 1fr; gap: 18px; }
  .allocation-ring { width: 105px; height: 105px; }
  .allocation-list { text-align: left; }
  .allocation-list span { font-size: 11px; }
  .allocation-list b { font-size: 10px; }
  .allocation-list img.asset-symbol { width: 24px; height: 24px; }
  .concept-study { gap: 20px; }
  .concept-icon { width: 88px; height: 88px; }
  .concept-cards { text-align: left; }
  .concept-cards strong { font-size: 14px; }
  .concept-cards > div { padding: 14px 15px; }
  .method-picture.method-progress { padding: 30px 15px; }
  .journey-labels { font-size: 11px; }
}
@media (prefers-contrast: more) { .visual-footnote, .asset-profile span, .role-row span { color: #e5f3ff; } }

/* The same blue-glass treatment and footprint for all consultancy symbols. */
.audience-art .app-glass-icon { width: 86px; height: 86px; border-radius: 50%; border: 1px solid #72c6ff40; background: radial-gradient(ellipse at 25% 5%,#a2e4ff2e,transparent 65%),linear-gradient(145deg,#135d9e66,#0b315b66); box-shadow: inset 0 .5px .5px #c5efff4d,0 8px 24px #00132733; backdrop-filter: blur(12px); }
.audience-art .app-glass-icon img.design-symbol { width: 43px; height: 43px; padding: 0; filter: drop-shadow(0 1px 2px #003f8544); }
.rights-paper > .app-glass-icon { margin: 0 auto 18px; }
.custody-pair .app-glass-icon { margin: 0 auto 18px; }
.rights-pair .rights-paper { padding-top: 24px; }
.rights-pair .rights-paper strong { margin-top: 0; }

/* Use two masks on the approved artwork so only the ring rotates. */
.completion-symbol { position: relative; width: min(285px,100%); aspect-ratio: 1312/1199; margin: 0 auto 18px; }
.completion-orbit,.completion-check { position: absolute; inset: 0; transform-origin: 49% 51%; }
.completion-symbol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.completion-orbit { mask-image: radial-gradient(circle closest-side at 49% 51%,transparent 0 48%,#000 51%); -webkit-mask-image: radial-gradient(circle closest-side at 49% 51%,transparent 0 48%,#000 51%); }
.completion-check { opacity: 0; mask-image: radial-gradient(circle closest-side at 49% 51%,#000 0 47%,transparent 50%); -webkit-mask-image: radial-gradient(circle closest-side at 49% 51%,#000 0 47%,transparent 50%); }
.method-progress.is-running .completion-orbit { animation: completion-turn 4.2s cubic-bezier(.2,.65,.25,1) both; }
.method-progress.is-running .completion-check { animation: completion-confirm 4.2s ease-out both; }
.method-progress.is-complete .completion-check { opacity: 1; }
@keyframes completion-turn { from { transform: rotate(0); } to { transform: rotate(1080deg); } }
@keyframes completion-confirm { 0%,82% { opacity: 0; transform: scale(.82); } 100% { opacity: 1; transform: scale(1); } }
@media(max-width:600px) { .audience-art .app-glass-icon { width: 76px; height: 76px; } .audience-art .app-glass-icon img.design-symbol { width: 38px; height: 38px; } .completion-symbol { width: min(255px,100%); } }
@media(prefers-reduced-motion:reduce) { .completion-orbit,.completion-check { animation: none!important; transform: none!important; } .completion-check { opacity: 1; } }

.crypto-asset-trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:end; width:100%; padding:12px 0; }
.crypto-asset-trio figure { margin:0; min-width:0; text-align:center; }
.crypto-asset-trio img { display:block; width:100%; height:180px; object-fit:contain; padding:0; }
.crypto-asset-trio figcaption { font-size:12px; line-height:1.5; color:#d4e6f7; margin-top:18px; white-space:nowrap; }
@media(max-width:600px) { .crypto-asset-trio img { height:150px; } .crypto-asset-trio figcaption { font-size:11px; margin-top:12px; } }

/* The method illustrations loop calmly while their section is visible. */
.method-picture .portfolio-loop { animation:portfolio-orbit 22s linear infinite; animation-play-state:paused; }
.method-row.is-visible .portfolio-loop { animation-play-state:running; }
@keyframes portfolio-orbit { to { transform:rotate(360deg); } }
.method-progress.is-running .completion-orbit { animation:completion-cycle 8s cubic-bezier(.2,.65,.25,1) infinite; }
.method-progress.is-running .completion-check { animation:confirmation-cycle 8s ease-in-out infinite; }
.completion-symbol { margin-bottom:0; }
@keyframes completion-cycle { 0% { transform:rotate(0); } 70%,100% { transform:rotate(1080deg); } }
@keyframes confirmation-cycle { 0%,60% { opacity:0; transform:scale(.85); } 76%,94% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.95); } }
.crypto-editorial { width:100%; padding:0; }
.crypto-editorial > img { width:100%; height:auto; max-height:315px; display:block; object-fit:contain; }
.crypto-still-life { position:relative; width:100%; aspect-ratio:1.2; max-height:300px; }
.crypto-cutout { position:absolute; display:block; overflow:visible; }
.crypto-btc { left:0; bottom:0; width:55%; height:67%; }
.crypto-eth { right:23%; top:0; width:30%; height:60%; }
.crypto-usdc { right:0; bottom:0; width:42%; height:51%; }
.personal-context { width:100%; max-width:430px; margin:auto; padding:25px 24px 14px; border-radius:28px; border:1px solid #9fd9ff3d; background:radial-gradient(ellipse at 0 0,#5dc6ff24,transparent 70%),linear-gradient(135deg,#0c3659cc,#0b2138b3); box-shadow:inset 0 1px 1px #d5f3ff35,0 18px 45px #0002; backdrop-filter:blur(16px); text-align:left; }
.personal-context .context-heading { font-size:15px; line-height:1.5; color:#b4d9ef; margin:0 0 12px 6px; }
.context-dimension { display:flex; align-items:center; gap:15px; min-height:87px; padding:15px 7px; position:relative; border-top:1px solid #a7d8f51a; animation:dimension-focus 12s ease-in-out infinite; animation-play-state:paused; border-radius:13px; }
.dimension-glyph { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; border:1px solid #7dc8ff40; background:linear-gradient(135deg,#69d1ff26,#0875c638); box-shadow:inset 0 1px 1px #e3f9ff38; }
.dimension-glyph svg { width:25px; height:25px; stroke:#85d9ff; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.context-dimension strong { display:block; color:#f1f8ff; font-size:19px; font-weight:600; line-height:1.3; }
.context-dimension div>span { display:block; font-size:11px; color:#b6cde1; margin-top:5px; line-height:1.6; }
.dimension-light { width:5px; height:5px; flex:0 0 5px; margin-left:auto; border-radius:50%; background:#63ceff; opacity:.3; }
.context-dimension:nth-child(2) { animation-delay:4s; }
.context-dimension:nth-child(3) { animation-delay:8s; }
.method-row.is-visible .context-dimension { animation-play-state:running; }
@keyframes dimension-focus { 0%,36%,100% { background-color:transparent; } 12%,24% { background-color:#4fb4ff14; } }
@media(max-width:600px) { .personal-context { padding:23px 17px 12px; } .context-dimension { gap:12px; padding:15px 5px; } .context-dimension strong { font-size:18px; } .context-dimension div>span { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .context-dimension { animation:none!important; } }
@media(prefers-reduced-motion:reduce) { .method-picture .portfolio-loop,.method-progress.is-running .completion-orbit,.method-progress.is-running .completion-check { animation:none!important; transform:none!important; } .completion-check { opacity:1!important; } }